XUL Element and Script Reference

General Object

XUL Element
A XUL element. The following lists attribute and properties common to all XUL elements. Some only have any meaning in particular situations such as when placed inside a template or overlay.
Attributes: align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width
Properties and Methods: align, allowEvents, blur, boxObject, boxObject.element, boxObject.getLookAndFeelMetric, boxObject.height, boxObject.screenX, boxObject.screenY, boxObject.width, boxObject.x, boxObject.y, builder, className, click, collapsed, contextMenu, controllers, database, datasources, dir, doCommand, flex, focus, getElementsByAttribute, height, hidden, id, left, maxHeight, maxWidth, menu, minHeight, minWidth, observes, ordinal, orient, pack, persist, ref, resource, statusText, style, tooltip, tooltipText, top, width

Box Elements

box
A container element which can contain any number of child elements. If the box has an orient attribute that is set to horizontal, the child elements are laid out from left to right in the order that they appear in the box. If orient is set to vertical, the child elements are laid out from top to bottom. Child elements do not overlap. The default orientation is horizontal.

hbox
A container element which can contain any number of child elements. This is equivalent to the box element.

bbox
A horizontal box that is baseline aligned. It is equivalent to using an hbox element with an align attribute set to baseline.

vbox
A container element which can contain any number of child elements. This is equivalent to the box element, except it defaults to vertical orientation.

Other Layout Elements

stack
An element that renders its children on top of each other. The first element if placed on the bottom, and each successive child is place above the previous one. All elements are displayed at once. Child elements may also be placed at absolute positions within the stack.

deck
An element that displays only one of its children at a time. The selectedIndex attribute determines which child is displayed.
Attributes: selectedIndex
Properties and Methods: selectedIndex, selectedPanel

scrollbox
A box that has additional functions that can be used to scroll the content. Note that a scrollbox doesn't cause scrollbars to be displayed. It is intended to be used when an application wants to be able to adjust the scroll position itself. If you just want scrollbars to appear, add style='overflow: auto;'. This may also be used with any other container element.

arrowscrollbox
A box which provides scroll arrows along its edges for scolling through the contents of the box. The user only needs to hover the mouse over the arrows to scroll the box. This element is typically used for large popup menus.
Properties and Methods: scrollByIndex

Grid Elements

grid
A grid is an element that contains both rows and columns elements. It is used to create a grid of elements. Both the rows and columns are displayed at once although only one will typically contain content, while the other may provide size information. Whichever is last in the grid is displayed on top.

columns
Defines the columns of a grid. Each child of a columns element should be a column element.

column
A single column in a columns element. Each child of the column element is placed in each successive cell of the grid. The column with the most child elements determines the number of rows in each column.

rows
Defines the rows of a grid. Each child of a rows element should be a row element.

row
A single row in a rows element. Each child of the row element is placed in each successive cell of the grid. The row with the most child elements determines the number of columns in each row.

List Elements

listbox
This element is used to create a list of items. This is a simpler version of a tree. Nested rows are not supported, but a listbox may contain multiple columns. There are numerous methods which allow the items in the listbox to be retrieved and modified.
Attributes: disableKeyNavigation, disabled, preference, rows, seltype, suppressonselect, tabindex, value
Properties and Methods: accessible, addItemToSelection, appendItem, clearSelection, currentItem, disableKeyNavigation, disabled, ensureElementIsVisible, ensureIndexIsVisible, getIndexOfFirstVisibleRow, getIndexOfItem, getItemAtIndex, getNextItem, getNumberOfVisibleRows, getPreviousItem, getRowCount, getSelectedItem, insertItemAt, invertSelection, listBoxObject, removeItemAt, removeItemFromSelection, scrollToIndex, selType, selectAll, selectItem, selectItemRange, selectedCount, selectedIndex, selectedItem, selectedItems, tabIndex, timedSelect, toggleItemSelection, value

listcols
A container for the columns of a listbox, each of which are created with the listcol element. There should be only one listcols element in a list box. If there is no listcols element, the list box has a single column.

listcol
A column in a list box. You can make some columns flexible and other columns non-flexible.

listitem
A single row in a list box. The text of the listitem is specified either using listcell elements, or by placing a label attribute directly on the listitem element. You may also place other elements inside the listitem for more complex content.
Attributes: accesskey, checked, command, crop, current, disabled, disabled, image, label, preference, selected, tabindex, type, value
Properties and Methods: accessKey, accessible, checked, control, crop, current, disabled, disabled, image, label, selected, tabIndex, value

listcell
A single cell of a listbox, used for cells which contain text only.
Attributes: crop, disabled, image, label, type
Properties and Methods: disabled

listhead
A header row of a listbox. It is usual to place listheader elements inside the listhead, one for each column.
Attributes: disabled
Properties and Methods: disabled

listheader
A header for a single column in a listbox.
Attributes: disabled

richlistbox
This element is used to create a list of items, similar to a listbox, but is designed to be used when the items do not contain simple text content. The richlistbox supports selecting a single item at a time.
Attributes: suppressonselect
Properties and Methods: accessible, children, clearSelection, ensureElementIsVisible, ensureSelectedElementIsVisible, getItemAtIndex, getRowCount, goDown, goUp, scrollBoxObject, selectedIndex, selectedItem, suppressOnSelect

richlistitem
An individual item in a richlistbox.
Attributes: disabled, selected, tabindex, value
Properties and Methods: accessible, control, disabled, label, selected, tabIndex, value

Tree Elements

tree
A container which can be used to hold a tabular or hierarchical set of rows of elements. The tree may contain any number of rows and any number of columns. Each row of the tree may contain child rows which are displayed indented from the parent. Unlike other elements, the data to display inside the tree is not specified using tags, but is determined from a view object. The view object implements the nsITreeView interface. The view is queried for the data to appear in the tree. There are several ways in which trees are used, as listed below. The second column lists the interfaces available via the tree's view property. The third column indicates whether treeitem element are used.
Attributes: disableKeyNavigation, disabled, enableColumnDrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex
Properties and Methods: accessible, builderView, columns, contentView, currentIndex, disableKeyNavigation, disabled, enableColumnDrag, firstOrdinalColumn, selType, selstyle, tabIndex, treeBoxObject, view

treecols
A group of treecol elements. There should one and only one treecols element in a tree.
Attributes: pickertooltiptext
Properties and Methods: accessible

treecol
A column of a tree. It displays the column header and holds the size and other information about the column. You can also place splitter elements between the columns to allow column resizing. You should always place an id attribute on a treecol element to ensure that the column positioning is handled properly.
Attributes: crop, cycler, dragging, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortActive, sortDirection, src, type
Properties and Methods: accessible

treechildren
This element is the body of the tree. For content trees, the content will be placed inside this element. This element is also used to define container rows in the tree.
Attributes: alternatingbackground

treeitem
A treeitem should be placed inside a treechildren element and should contain treerow elements. The treeitem can be clicked by the user to select the row of the tree. The treeitem contains a single row and all of what appear to the user as that row's descendants.
Attributes: container, empty, label, open, uri

treerow
A single row in a tree. It should be placed inside a treeitem element. Children of the treerow should be treecell elements. If child rows are necessary, they should be placed in a treechildren element inside the parent treeitem.
Attributes: properties

treecell
A single cell in a tree. This element should be placed inside a treerow. You can set the text for the cell using the label attribute.
Attributes: label, mode, properties, ref, src, value

treeseparator
Used to place a seperator row in a tree.
Attributes: properties

Frames

iframe
An inner frame that works much the HTML iframe element. The src attribute can be used to specify the content of the frame. This content is a separate document. The children of the iframe are ignored.
Attributes: src
Properties and Methods: accessible, contentDocument, contentWindow, docShell, webNavigation

browser
A frame which is expected to contain a view of a Web document. It is similar to an iframe except that it holds a page history and contains additional methods to manipulate the currently displayed page.
Attributes: autocompleteenabled, autocompletepopup, autoscroll, disablehistory, disablesecurity, homepage, src, type
Properties and Methods: accessible, addProgressListener, canGoBack, canGoForward, contentDocument, contentTitle, contentViewerEdit, contentViewerFile, contentWindow, currentURI, docShell, documentCharsetInfo, goBack, goForward, goHome, gotoIndex, homePage, loadURI, loadURIWithFlags, markupDocumentViewer, preferences, reload, reloadWithFlags, removeProgressListener, securityUI, sessionHistory, stop, webBrowserFind, webNavigation, webProgress

tabbrowser
This element is used for holding a set of read-only views of Web documents. Similar to the browser element, except that mutliple documents can be displayed, each in a separate tab. This element is implemented as a set of browser elements inside a tabbox.
Attributes: autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handleCtrlPageUpDown, onbookmarkgroup, onnewtab
Properties and Methods: addProgressListener, addTab, appendGroup, browsers, canGoBack, canGoForward, contentDocument, contentTitle, contentViewerEdit, contentViewerFile, contentWindow, currentURI, docShell, documentCharsetInfo, getBrowserForTab, goBack, goBackGroup, goForward, goForwardGroup, goHome, gotoIndex, homePage, loadGroup, loadURI, loadURIWithFlags, markupDocumentViewer, reload, reloadAllTabs, reloadTab, reloadWithFlags, removeAllTabsBut, removeCurrentTab, removeProgressListener, removeTab, replaceGroup, securityUI, selectedBrowser, selectedTab, sessionHistory, stop, tabContainer, webBrowserFind, webNavigation, webProgress

editor
A frame which is expected to contain an editable document. Set the value of the editortype attribute to 'html' to create an editor document. Mozilla provides two types of editors, the HTML editor and the plaintext editor. The editor does not provide any editing user interface; you would supply that yourself. However, text editing, image resizing, and table row and cell editing capabilities are provided. If you do not set the editortype attribute on an editor, you must enable editing using the makeEditable method.
Attributes: editortype, src, type
Properties and Methods: accessible, commandManager, contentDocument, contentWindow, docShell, editingSession, editortype, getEditor, getHTMLEditor, makeEditable, webBrowserFind, webNavigation

Main Widgets

button
A button that can be pressed by the user. Event handlers can be used to trap mouse, keyboard and other events. It is typically rendered as a grey outset rectangle. You can specify the label of the button using the label attribute or by placing content inside the button.
Attributes: accesskey, autoCheck, checkState, checked, command, crop, dir, disabled, dlgType, group, icon, image, label, open, orient, tabindex, type
Properties and Methods: accessKey, accessible, autoCheck, checkState, checked, command, crop, dir, disabled, dlgType, group, image, label, open, orient, tabIndex, type

checkbox
An element that can be turned on and off. This is most commonly rendered as a box when the element is off and a box with a check when the element is on. The user can switch the state of the check box by selecting it with the mouse. A label, specified with the label attribute may be added beside the check box to indicate to the user as to its function.
Attributes: accesskey, checked, command, crop, disabled, image, label, preference, tabindex
Properties and Methods: accessKey, accessible, checked, command, crop, disabled, image, label, tabIndex, value

radio
An element that can be turned on and off. Radio buttons are almost always grouped together in groups. Only one radio button within the same radiogroup may be selected at a time. The user can switch which radio button is turned on by selecting it with the mouse or keyboard. Other radio buttons in the same group are turned off. A label, specified with the label attribute may be added beside the radio button to indicate to the user as to its function.
Attributes: accesskey, command, crop, disabled, focused, image, label, selected, tabindex, value
Properties and Methods: accessKey, accessible, crop, disabled, image, label, radioGroup, selected, tabIndex, value

textbox
A text input field in which the user can enter text. It is similar to the HTML input element. Only one line of text is displayed by default. The multiline attribute can be specified to display a field with multiple rows.
Attributes: cols, disabled, maxlength, multiline, onchange, oninput, preference, readonly, rows, size, tabindex, timeout, type, value, wrap
Properties and Methods: accessible, disabled, inputField, maxLength, readonly, select, selectionEnd, selectionStart, setSelectionRange, size, tabIndex, textLength, timeout, type, value

textbox+(Mozilla+Auto+Complete)
This element is created by setting the type attribute of a textbox to 'autocomplete'. It is used to create a textbox with a popup containing a list of possible completions for what the user has started to type.
Attributes: alwaysopenpopup, autoFill, autoFillAfterMatch, crop, disableAutocomplete, disabled, disablehistory, focused, forceComplete, ignoreBlurWhileSearching, inputtooltiptext, label, maxlength, maxrows, minResultsForPopup, nomatch, onerrorcommand, ontextcommand, ontextrevert, open, searchSessions, showCommentColumn, showpopup, size, tabScrolling, tabindex, timeout, type, userAction, value
Properties and Methods: accessible, addSession, alwaysOpenPopup, autoFill, autoFillAfterMatch, clearResults, crop, disableAutocomplete, disabled, editable, focused, forceComplete, getDefaultSession, getResultAt, getResultCount, getResultValueAt, getSession, getSessionByName, getSessionResultAt, getSessionStatusAt, getSessionValueAt, ignoreBlurWhileSearching, inputField, isSearching, isWaiting, label, maxLength, maxRows, minResultsForPopup, noMatch, open, removeSession, resultsPopup, searchSessions, select, selectionEnd, selectionStart, sessionCount, setSelectionRange, showCommentColumn, showPopup, size, syncSessions, tabIndex, tabScrolling, textLength, timeout, type, userAction, value

textbox+(Firefox+Auto+Complete)
This element is created by setting the type attribute of a textbox to 'autocomplete'. It is used to create a textbox with a popup containing a list of possible completions for what the user has started to type.
Attributes: accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly, showcommentcolumn, size, tabindex, tabscrolling, timeout, type, value
Properties and Methods: accessible, completeDefaultIndex, controller, crop, disableAutoComplete, disableKeyNavigation, disabled, editable, focused, forceComplete, getSearchAt, ignoreBlurWhileSearching, inputField, label, maxLength, maxRows, minResultsForPopup, onSearchComplete, onTextEntered, onTextReverted, open, popup, popupOpen, searchCount, searchParam, select, selectionEnd, selectionStart, setSelectionRange, showCommentColumn, size, tabIndex, tabScrolling, textLength, textValue, timeout, type, value

description
This element is used to create a block of text. The text can be set either with the value attribute or by placing text inside the open and close description tags. The value attribute is used to set text that appears in a single line. If text appears as a child of the description, it will wrap to multiple lines. If may contain arbitrary markup, which can be styled as needed.
Attributes: accesskey, control, crop, disabled, value
Properties and Methods: accessKey, accessible, control, crop, disabled, value

label
This element is used to provide a label for an control element, If the user clicks the label, it will move the focus to the associated control, specified with the control attribute.
Attributes: accesskey, control, crop, disabled, value
Properties and Methods: accessKey, accessible, control, crop, disabled, value

image
An element that displays an image, much like the HTML img element. The src attribute can be used to specify the URL of the image.
Attributes: onerror, onload, src, validate
Properties and Methods: accessible, src

separator
Creates a small separating gap between elements. This type of separator should be used to separate parts of a dialog. It doesn't draw a bar visually, but is just a small space. It is functionally equivalent to a spacer except it defaults to a small size (usually 1.5 ems).
Attributes: orient

spacer
An element that takes up space but does not display anything. It is usually used to place spacing within a container. If you don't specify that the spacer has a size or is flexible, the spacer does not occupy any space. If you want a small gap, consider using a separator instead.

progressmeter
A meter which can be used to display the progress of a lengthy operation. It is drawn as a bar that is filled as the operation completes. In addition, an undeterminate progressmeter may be created by setting the mode attribute. This is used when the length of time to complete an operation is not known beforehand.
Attributes: mode, value
Properties and Methods: accessible, mode, value

Menus

menubar
A container that usually contains menu elements. On the Macintosh, the menubar is displayed along the top of the screen, and all non-menu related elements inside the menubar will be ignored.
Attributes: accessible, grippyhidden, statusbar
Properties and Methods: statusbar

menu
An element, much like a button, that is placed on a menu bar. When the user clicks the menu element, the child menupopup of the menu will be displayed. This element is also used to create submenus.
Attributes: acceltext, accesskey, allowevents, crop, disabled, key, label, menuactive, open, sizetopopup, value
Properties and Methods: value

menupopup
A container used to display menus. It should be placed inside a menu, menulist or menu-type button element. It can contain any element but usually will contain menuitem elements. It is a type of box that defaults to vertical orientation.
Attributes: ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top
Properties and Methods: accessible, hidePopup, moveTo, popupBoxObject, position, showPopup, sizeTo

menuitem
A single choice in a menupopup element. It acts much like a button but it is rendered on a menu.
Attributes: acceltext, accessible, accesskey, allowevents, autocheck, checked, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value
Properties and Methods: label, value

menulist
An element that can be used for drop-down choice lists. The user may select one of the elements displayed in the menulist. The currently selected choice is displayed on the menulist element. To create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements.
Attributes: accesskey, crop, disableautoselect, disabled, editable, focused, image, label, open, preference, readonly, sizetopopup, src, tabindex, value
Properties and Methods: accessible, appendItem, crop, description, disableautoselect, disabled, inputField, insertItemAt, label, menuBoxObject, menupopup, open, removeAllItems, removeItemAt, select, selectedIndex, selectedItem, src, tabIndex, value

menuseparator
Used to create a separator between menu items. Typically drawn as a thin line.
Properties and Methods: accessible

Popups

popupset
A container for popup elements. You should declare all popup elements as children of a popupset. This element does not directly display on screen. Child popups will be displayed when asked to by other elements.

popup
A container that appears in a child window. The popup window does not have any special frame. Popups can be displayed when an element is clicked by assigning the id of the popup to either the popup, context or tooltip attribute of the element. A popup is a type of box that defaults to vertical orientation.
Attributes: ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top
Properties and Methods: accessible, hidePopup, moveTo, popupBoxObject, position, showPopup, sizeTo

tooltip
This element is used for the tooltip popups. For text only tooltips, this element doesn't need to be used; instead you may just add a tooltiptext attribute to an element.
Attributes: crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position
Properties and Methods: hidePopup, label, moveTo, popupBoxObject, position, showPopup, sizeTo

Toolbars

toolbox
A container for toolbars. It is a type of box but defaults to vertical orientation. If a toolbar is placed inside a toolbox, a grippy is displayed on its left or upper edge. The user may click the grippy to collapse the toolbar. If multiple toolbars are placed in the same toolbox, they will all collapse into the same row. The Firefox browser does not have grippies so toolbars cannot be collapsed and expanded.
Properties and Methods: accessible, appendCustomToolbar, collapseToolbar, customToolbarCount, expandToolbar, palette, toolbarset

toolbar
A container which typically contains a row of buttons. It is a type of box that defaults to horizontal orientation. It can be collapsed with a grippy when the toolbar is placed inside a toolbox. The toolbar should always have an id attribute. Firefox supports toolbar customization, whereas the Mozilla browser does not.
Attributes: currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, toolbarname
Properties and Methods: accessible, currentSet, firstPermanentChild, insertItem, lastPermanentChild, toolbarName

toolbarpalette
The item is a palette of available toolbar items. It is not displayed, but is used by the toolbar customization dialog to display the list of items. The children of the toolbarpalette should be the complete list of toolbarbuttons and toolbaritems that can be added to the toolbar. Do not add the various spacing items, as those are added automatically.

toolbarset
This element is used as a container for custom toolbars, which are added in the custom toolbar dialog.

toolbarbutton
A button that appears on a toolbar. It is equivalent to a regular button except that it may be rendered differently. Typically, it is expected to have an image.
Attributes: accesskey, autoCheck, checkState, checked, command, crop, dir, disabled, dlgType, group, image, label, open, orient, tabindex, type, validate
Properties and Methods: accessKey, accessible, autoCheck, checkState, checked, command, crop, dir, disabled, dlgType, group, image, label, open, orient, tabIndex, type

toolbaritem
An item that appears on a toolbar. This element should wrap all items that are not buttons, which should instead be created using the toolbarbutton element. The element is used, for example, to hold the url field.

toolbarseparator
Creates a separator between a group of toolbar buttons. It is functionally equivalent to a normal separator but some themes may apply a different appearance.
Properties and Methods: accessible

toolbarspacer
A space between toolbar items.
Properties and Methods: accessible

toolbarspring
A flexible space between toolbar items.
Properties and Methods: accessible

toolbargrippy
The notch on the side of a toolbar which can be used to collapse and expand it. This element is used internally by the toolbar and should only be used directly when modifying its theme.
Properties and Methods: accessible

Tabboxes

tabbox
A container used to display tabbed pages of elements to the user. The tabbox should contain two children, the first a tabs element which contains the tabs and the second a tabpanels element which contains the contents of the pages. This is a type of box that defaults to vertical orientation.
Attributes: eventnode, handleCtrlPageUpDown, handleCtrlTab
Properties and Methods: accessible, eventNode, handleCtrlPageUpDown, handleCtrlTab, selectedIndex, selectedPanel, selectedTab

tabs
A row of tabs. A tabs element should be placed inside a tabbox and should contain tab elements.
Attributes: closebutton, disableclose, first-tab, last-tab, onclosetab, onnewtab, onselect, setfocus, tooltiptextnew
Properties and Methods: advanceSelectedTab, appendItem, insertItemAt, removeItemAt, selectedIndex, selectedItem

tab
A single tab which should be placed inside a tabs element. The user may click a tab to bring the associated page of the tabbox to the front.
Attributes: accesskey, afterselected, beforeselected, crop, disabled, image, label, linkedpanel, selected, validate
Properties and Methods: accessible, label, linkedPanel, selected, tabs

tabpanels
A container to hold the set of pages in a tabbox. The tabpanels element should be placed in a tabbox. The children of the tabpanels element become the panels of the tabbox. Usually, the children are tabpanel elements. By clicking the first tab, the first panel will be displayed. By clicking the second tab, the second panel will be displayed and so on.
Attributes: selectedIndex
Properties and Methods: accessible, selectedIndex, selectedPanel

tabpanel
A individual panel in a tabpanels element. This element is optional and you may just use any other container in place of it.

Status Bars

statusbar
An element used to create a status bar, usually placed along the bottom of a window. It is virtually equivalent to a standard box, but may be rendered differently.
Properties and Methods: accessible

statusbarpanel
An individual element of a statusbar. This is a special type of button which is drawn differently. Unlike normal buttons, a statusbarpanel can only have a label or an image but not both. This element is often used with a short label or icon to indicate status, for instance whether the user is online or whether there are new messages.
Attributes: crop, label, src
Properties and Methods: label, src

Group Elements

radiogroup
A group of radio buttons. Only one radio button inside the group can be selected at a time. The radio buttons may either direct children of the radiogroup or descendants. Place the radiogroup inside a groupbox if you would like a border or caption around the group. The radiogroup defaults to vertical orientation.
Attributes: disabled, focused, preference, tabindex, value
Properties and Methods: accessible, appendItem, checkAdjacentElement, disabled, focusedItem, insertItemAt, removeItemAt, selectedIndex, selectedItem, tabIndex, value

groupbox
A box that draws a frame around it, intended to group a set of elements together. If a caption element is placed inside the groupbox, it will be used as a caption which appears along the top of the groupbox.
Properties and Methods: accessible

caption
A header for a groupbox. It may contain either a text label, using the label attribute, or child elements for a more complex caption.
Attributes: accesskey, crop, image, label, tabindex
Properties and Methods: accessKey, crop, image, label, tabIndex

Miscellaneous Widgets

colorpicker
An element that the user may use to select a color from. Mozilla renders this as a grid of colors. The user may select a color by clicking on one of the grid cells.
Attributes: disabled, color, onchange, preference, tabIndex, type
Properties and Methods: color, disabled, tabIndex, value

splitter
An element which should appear before or after an element inside a container. When the splitter is dragged, the sibling elements of the splitter are resized. If a grippy in placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked.
Attributes: collapse, resizeafter, resizebefore, state

grippy
An element that may be used inside a splitter which can be used to collapse a sibling element of the splitter.

scrollbar
When a container contains contents which are larger that the size of the content, scroll bars may be placed at the side of the container to allow the user to scroll around in the container. The scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. The user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around.
Attributes: curpos, increment, maxpos, pageincrement

scrollcorner
This element is used for the small box where the horizontal and vertical scrollbars meet.

Keyboard Shortcuts

keyset
A container element for key elements. The keyset and its descendants are not displayed.

key
The key element defines a keyboard shortcut. Event handlers can be used to respond when the appropriate keys are pressed. A key element must be placed inside a keyset element.
Attributes: command, disabled, key, keycode, keytext, modifiers, oncommand, phase

Broadcast Elements

broadcasterset
A container element for broadcaster elements. The broadcasterset and its descendants are not displayed.

broadcaster
A broadcaster is used whn you want multiple elements to share one or more attribute values, or when you want elements to respond to a state change. Any elements that are observing the broadcaster will share the attributes placed on the broadcaster. For instance, if the broadcaster has a label attribute, the observes will use that label. If the label changes, the labels of the observers will update automatically. An onbroadcast event will be sent to the observers when a change is made.

observes
The observes element can be used to listen to a broadcaster and receive events and attributes from it. The observes element should be placed inside the element that wants to observe the broadcaster. When an observed attribute is modified on the broadcaster, the attribute's value will be forwarded and set on the parent element of the observer.
Attributes: attribute, element

commandset
This element is not displayed and serves as a container for command elements.
Attributes: commandupdater, events, oncommandupdate, targets

command
A command element can be used to invoke an operation that can come from multiple sources. For example, a clipboard paste operation can be invoked from the Edit menu, a context menu and by pressing a keyboard shortcut. You attach the code to the command using the oncommand attribute. It will be called no matter how it is invoked by the user. In addition, disabling the command will automatically disable the menu items and keyboard shortcuts.
Attributes: disabled, label, oncommand

Templates

template
Used to declare a template for rule-based construction of elements. Elements are constructed from a datasource. For more information see the rule element.
Attributes: container, member

rule
A rule is used in a template. The children of the rule are used to declare the conditions in which the rule matches and the content that is generated. When the content needs to be displayed, the template builder scans through the RDF datasource searching for nodes that match the rules. When a rule is matched, the corresponding content is generated.
Attributes: iscontainer, isempty, parent, parsetype

bindings
Should be contained within a rule. Used to specify a set of variable bindings for a rule. This element should contain one or more binding elements.

binding
Should be contained within a bindings element. A binding is used to bind a variable to a node. Like the triple element in syntax, it can be used to bind a particular property of a matched node to a particular variable name. That name can then be used within the action of a rule.
Properties and Methods: object, predicate, subject

action
Should be contained within a rule element. It is used to specify the generated content for each matched node. Within the action, attributes are parsed for resource and variable references.

conditions
This element should appear directly inside a rule element and is used to define conditions for the rule. Within the conditions can be placed content, member and triple elements. These may have attributes whose value is a variable name beginning with a question mark (?). When evaluating the rule for a particular RDF resource, the variables are replaced with values from the resource. If all variables can be replaced, the rule matched.

content
This element should appear inside a conditions element. A rule's conditions should contain one and only one content element. The content element should also have a uri attribute. It is used to bind a variable to a content node during matching. When using a tree with the 'flags' attribute set to 'dont-build-content', use a treeitem element instead.
Properties and Methods: tag, uri

triple
A triple can be included inside a rule's conditions element. It is used check for an assertion within a graph. If such an assertion exists, the rule may match, assuming that all the conditions match. If the assertion does not exist, the rule will not match. Both the subject and object attributes may be variables.
Properties and Methods: object, predicate, subject

member
Used within a rule's conditions element to match elements that are containers or are contained within another element. Both the container and child attributes may use variables.
Properties and Methods: child, container

textnode
Normally when substituting RDF resources in template rules, you place the RDF property name inside an attribute value preceded with 'rdf:'. In the case of the textnode element, the entire node is replaced with text corresponding to the result of the value attribute.
Attributes: value

Wizard Elements

wizard
This element is used to construct a step-by-step wizard found in some applications to guide users through a task. It is used for a window with several steps contained on several pages. This element provides the header and buttons along the bottom, and also handles navigation between the pages. Each page should be constructed using a wizardpage. The pages are displayed in the order that they are placed in the wizard, unless you use the next and pageid attributes on the pages to change the sequence. The wizard will rendered in a manner suitable for the user's selected theme and platform. In newer versions of Mozilla, a statusbar may be placed directly inside the wizard element which will be shared among all pages.
Attributes: firstpage, lastpage, onwizardback, onwizardcancel, onwizardfinish, onwizardnext, pagestep, title
Properties and Methods: advance, canAdvance, canRewind, cancel, currentPage, getButton, getPageById, goTo, onFirstPage, onLastPage, pageCount, pageIndex, pageStep, rewind, title, wizardPages

wizardpage
This element defines a page in a wizard. The content in the pages should be placed inside the wizardpage element.
Attributes: description, label, next, onpageadvanced, onpagehide, onpagerewound, onpageshow, pageid
Properties and Methods: next, pageid

Windows and Scripts

window
Describes the structure of a top-level window. It is the root node of a XUL document. It is by default a horizontally oriented box. As it is a box, all box attributes can be used. By default, the window will have a platform-specific frame around it.
Attributes: height, hidechrome, id, screenX, screenY, sizemode, title, width, windowtype

dialog
This element should be used in place of the window element for dialog boxes. The buttons attribute may be used to set which buttons should appear in the dialog box. These buttons will be placed in the correct locations for the user's platform.
Attributes: buttonaccesskeyaccept, buttonaccesskeycancel, buttonaccesskeydisclosure, buttonaccesskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultButton, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, title
Properties and Methods: acceptDialog, buttons, cancelDialog, centerWindowOnScreen, defaultButton, getButton, moveToAlertPosition

dialogheader
A heading row for a dialog box. This element should be placed inside a dialog element. The header may have a title and a description.
Attributes: crop, description, title

page
Similar to a window, except it should be used for XUL files that are to be loaded into an iframe.

overlay
An overlay is used when it is desirable for a block of content to be shared between several different windows. In addition, it can be used to append or alter content in an existing window. An overlay is defined in a separate XUL file. Overlays are applied while the XUL is being loaded.
Attributes: class, id

script
Much like the HTML script element, this is used to declare a script to be used by the XUL window. You should usually put scripts in a separate file pointed to by the src attribute, but you may also place the script inline inside the opening and closing script tags.
Attributes: src, type

titlebar
Used to represent a title bar. This element is used to create a custom titlebar by placing the contents as children inside the titlebar. When the titlebar is clicked and dragged, the window moves with it. Any elements inside the titlebar do not receive events. The titlebar will send a command event after the move is complete.

resizer
An element used for window resizing. If you place a custom resizing button inside the resizer, the user will be able to resize the window by dragging it. The resizer will send a command event after the resize is complete.
Attributes: dir

stringbundle
An element which can be used to load localized resources from property files. Stringbundles should be placed inside a stringbundleset element.
Attributes: src
Properties and Methods: appLocale, getFormattedString, getString, src, stringBundle, strings

stringbundleset
A container for stringbundle elements.

Preferences

prefwindow
A specialized window used for preference dialogs. This element should be used in place of the window tag and should contain one or more prefpane elements. A row of buttons appears across the preference dialog, one for each prefpane. Each pane will usually group together a set of related preferences. If there is only one prefpane, the navigation area will be hidden.
Attributes: buttonalign, buttondir, buttonorient, buttonpack, buttons, defaultButton, lastSelected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onpaneload, title, type
Properties and Methods: acceptDialog, addPane, buttons, cancelDialog, centerWindowOnScreen, currentPane, defaultButton, getButton, lastSelected, moveToAlertPosition, openSubDialog, openWindow, preferencePanes, showPane, type

prefpane
A single preference panel in a prefwindow. A prefpane is made up of two parts, the preferences descriptions, which specify the set of preferences that will be modified, and the user interface for adjusting those preferences. The former is specified using a preferences element while the latter may be specified using other XUL elements.
Attributes: helpURI, image, label, onpaneload, selected, src
Properties and Methods: image, label, preferenceElements, preferenceForElement, preferences, selected, src

preferences
Used to hold a set of preference elements.

preference
Declares a preference that may adjusted in a prefpane. This element should be placed inside a preferences element. Each preference element corresponds to a preference which is stored in the user's preferences file. You can connect a user interface element such as a checkbox to a preference element using the user interface element's preference attribute.
Attributes: disabled, instantApply, inverted, name, onchange, readonly, tabindex, type
Properties and Methods: disabled, hasUserValue, inverted, locked, name, preferences, readonly, reset, tabIndex, type, value

Event Handlers

Event Handlers
The following describes the event handler attributes that are valid for most XUL elements. The event name is the attribute without the 'on' prefix.
Attributes: CheckboxStateChange, DOMAttrModified, DOMMenuItemActive, DOMMenuItemInactive, DOMMouseScroll, DOMNodeInserted, DOMNodeRemoved, RadioStateChange, onblur, onbroadcast, onchange, onclick, onclose, oncommand, oncommandupdate, oncontextmenu, ondblclick, ondragdrop, ondragenter, ondragexit, ondraggesture, ondragover, onfocus, oninput, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onoverflow, onoverflowchanged, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, onselect, onsyncfrompreference, onsynctopreference, onunderflow, onunload

XBL Elements

bindings
The root node of an XBL file. It should contain one or more binding tags.
Attributes: id

binding
Declares a binding. The id attribute is used to identify a binding and refer to it within a style sheet via the -moz-binding property. The same binding can be used to attach to any number of elements.
Attributes: display, extends, id, inheritstyle

content
Used to define the anonymous content of a binding. The elements within the content tag become the anonymous content of the element bound to. The content is visible on screen as if it was present directly in the XUL file, however the elements cannot be seen via the normal DOM functions.
Attributes: id

children
Specifies the location where any child elements of the bound element are placed in the generated content.
Attributes: id, includes

handlers
Used to hold handler elements, which are used to declare event handlers.
Attributes: id

handler
Specifies event handlers which the XBL element responds to. You can provide default handling which can be overriden by an appropriate handler on the bound element. When the event occurs, the code contained in the action attribute or, if the action is not present, the content of the handler tag is executed.
Attributes: action, button, charcode, clickcount, command, event, id, keycode, modifiers, phase, preventdefault

implementation
This element should contain all of the field, property and method declarations for the binding.
Attributes: id, implements, name

property
Declares a JavaScript property that is added to the element's object. The property element may have a getter child element and a setter child element to get and set the value of the property respectively.
Attributes: id, name, onget, onset, readonly

field
A field is similar to a property, except that should not have a getter or setter. It is useful as a simple holder for a value.
Attributes: id, name, readonly

getter
Defines code which is called to retrieve the value of a property. The code should return the value of the property.
Attributes: id

setter
Defines code which is called to modify the value of a property. The variable val is defined as the value to set the property to.
Attributes: id

method
Declares a JavaScript method that is added to the element's object. The method may take arguments, declared with the parameter element.
Attributes: id, name

parameter
Declares a parameter to a method. Each parameter has a name attribute with becomes a variable that is declared in the method body and has the value that was passed in to the method.
Attributes: id, name

body
The content of the body element should be the code to execute when the method is called.
Attributes: id

constructor
The code inside this element is called when the binding is attached to an element. You can use this to initialize the content the binding uses. The constructor should be placed inside the implementation element.
Attributes: action, id

destructor
The code inside this element is called when the binding is removed from an element. You can use this to unload resources to free memory. The destructor should be placed inside the implementation element.
Attributes: action, id

resources
Used to specify a list of resources that the binding uses. This includes images, using the image element or style sheets using the stylesheet element. The resources element should be placed directly inside the binding element.
Attributes: id

image
Declares an image resource used by the binding. The image is loaded as soon as the binding is used. You can use this to preload a number of images for later use.
Attributes: id, src

stylesheet
Declares a style sheet used by the binding. Using this element is preferred over using an XML processing instruction. The style rules in the style sheet will only be applied to the binding, not to other elements in the document.
Attributes: id, src

XPInstall Objects

InstallTrigger
Used to trigger an installation of a component. The component should be an XPI file containing the files to installed. The XPI file will be downloaded and the install.js script within the installer will be executed. This object is a global object and its methods can be called directly.
Properties and Methods: compareVersion, enabled, getVersion, install, installChrome, startSoftwareUpdate

Install
An object used for installations. This object is only available within an installation script.
Properties and Methods: Install, addDirectory, addFile, alert, archive, arguments, buildID, cancelInstall, confirm, deleteRegisteredFile, execute, gestalt, getComponentFolder, getFolder, getLastError, getWinProfile, getWinRegistry, initInstall, jarfile, loadResources, logComment, patch, performInstall, platform, refreshPlugins, registerChrome, resetError, setPackageFolder, uninstall, url

File
The File object can be used to manipulate files. Like the Install functions, the functions of the File object only assign an operation to be performed once the installation has begun.
Properties and Methods: copy, dirCreate, dirGetParent, dirRemove, dirRename, diskSpaceAvailable, execute, exists, isDirectory, isFile, macAlias, modDate, modDateChanged, move, nativeVersion, remove, rename, size, unixLink, windowsRegisterServer, windowsShortcut

Some of Mozilla's Built-in Datasources

rdf:bookmarks
This datasource holds the user's bookmarks. Each bookmark holds a title and URL and information about when the user has visited the bookmark and the schedule for checking when the URL is checked for updates. The root of the bookmarks datasource is NC:BookmarksRoot. You can also use the roots NC:PersonalToolbarFolder for the folder holding personal toolbar items and NC:IEFavoritesRoot for the folder containing the imported IE favorites.
Resource Properties: rdf:BookmarkAddDate, rdf:Description, rdf:LastModifiedDate, rdf:LastVisitDate, rdf:Name, rdf:Schedule, rdf:ShortcutURL, rdf:URL, rdf:status, rdf:type
Resource Commands: rdf:deletebookmark, rdf:deletebookmarkfolder, rdf:deletebookmarkseparator, rdf:export, rdf:import, rdf:newbookmark, rdf:newfolder, rdf:newseparator, rdf:setnewbookmarkfolder, rdf:setnewsearchfolder, rdf:setpersonaltoolbarfolder

rdf:history
The history datasource holds a list of the pages that the user has visited. It is available in two forms, a flat list by using NC:HistoryRoot and organized by day by using NC:HistoryByDate. In this latter form, items are stored in one of seven folders, storing URLs visited in each of the recent seven days. URLs visited earlier are placed in the last folder.
Resource Properties: rdf:Date, rdf:FirstVisitDate, rdf:Hostname, rdf:Name, rdf:Referrer, rdf:URL, rdf:VisitCount

rdf:files
The files datasource holds a tree of the user's filesystem. Use NC:FilesRoot in a ref attribute to grab the file list from the root. Alternatively, you can use a file URL to specify a particular directory.
Resource Properties: rdf:Content-Length, rdf:LastModifiedDate, rdf:Name, rdf:URL, rdf:extension

rdf:window-mediator
This datasource holds a list of all of the open windows. Use a ref value of NC:WindowMediatorRoot in a template.
Resource Properties: rdf:Name