Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Mozilla Overlay Mechanics
The overlay system is quite simple. One XUL document is the master document. This document provides a starting point for the final content. Zero or more other XUL documents are overlays. Overlay content is merged into or added to the master document's content. This happens in memory when those documents are loaded, and has no effect on the original files.
An overlay document is a XUL document based on the <overlay> tag instead of the <window> tag. The overlay file has a .xul extension and is well-formed XML, but it isn't meant to be displayed alone. It's a piece of an XML document. Mozilla can display an overlay file by itself, but that's only useful for testing purposes.
The overlay system uses a single algorithm for merging content. That algorithm is based on the XUL id attribute and has a few minor variations. XUL's id attribute has the same role in XUL as the attribute of the same name in HTML—it uniquely defines a given tag. The merge algorithm matches ids from the overlay document into the master document. So both the XUL master and the XUL overlay can contain syntax that's part of the overlay system.
Let's look at a quick example of overlays at work. This example builds a final document that has three <label> tags, one for each color in a traffic light. (XUL's <label> tag is a little like an HTML <A> tag.)
NOTE
Irrelevant syntax has been removed for clarity in the following example.
Suppose the master XUL document looks like this:
<window> <box id="one"/> <box id="two"> <label value="Amber"/> </box> </window>
XUL's <box> tag acts much like HTML's <DIV> tag, so that's two boxes, one after the other, with the first one empty. Now, suppose you have these two overlay documents:
<overlay> <box id="one"> <label="Red"/> </box> <box id="three"> <label="Purple"/> </box> </overlay> <overlay> <box id="two"> <label value="Green"/> </box> </overlay>
Note that some values for the id attribute appear in both master and overlay documents. If these two overlays are merged into the master, this is the final document:
How does this work? If an id attribute in the master document matches an id attribute in an overlay document, the child tags of that id are copied from the overlay to the master. They're added into the content of the master under that id, if any. If no id match is found (the Purple case, for example), nothing is added to the master.
Except for some processing detail, that's all the overlay system does. It's quite a simple and neat system.