An overlay is used when it is desirable for a block of content to be shared between several different windows. It can also 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.
Each element within the overlay is inserted at a location in the master window, determined by matching id attributes. For instance, if an element in an overlay has an id of file_menu, the corresponding element with the idfile_menu in the master window that uses the overlay would be altered. Attributes declared in the overlay are added to that element and child elements are inserted into the window within that element. Elements directly inside the overlay element as children that do not have id attributes are appended to the master window. This allows the addition of scripts to the master window from the overlay.
Overlays do not have their own onload event. Some initialization code, such as loading components and modules, may be placed directly in a script outside of a function. However it is unsafe to access DOM nodes before the window has loaded. Call the addEventListener method to listen to the load event for the window (which does not fire until the master window and all overlays are applied).
Overlays may be applied to windows in other packages. Files, such as scripts, that are referenced from the overlay should be specified as absolute URLs. If you do specify a relative URL, it will be relative to the window that the overlay applies to, not the overlay's file.
More information is available in the XUL tutorial.
Examples
<?xml version="1.0"?><overlay id="myOverlay" xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menu id="file_menu"> <menuitem name="Super Stream Player"/> </menu></overlay>
Attributes
-
class - Type: string
- The style class of the element. Multiple classes may be specified by separating them with spaces.
-
id - Type: unique id
-
A unique identifier so that you can identify the element with. You can use this as a parameter to
getElementById()and other DOM functions and to reference the element in style sheets.