Overlays in XUL

Creating overlays is easy; you still need the XML declaration and the XUL namespace is added as an attribute of an <overlay> element instead of a <window> element.  Elements within the overlay file should have an ID attribute which is used to match the overlaid content with the main application.  Create a XUL file that contains the following code:

<?xml version="1.0"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">
<menu id="overlaidMenu">
  <menupopup id="newPopup">
    <menuitem id="menuitem1" label="New item 1"/>
    <menuitem id="menuitem1" label="New item 2"/>
    <menuitem id="menuitem1" label="New item 3"/>
    <menuitem id="menuitem1" label="New item 4"/>
  </menupopup>
</menu>
</overlay>

Now save this file into the content folder of your application with a filename of newmenuOverlay.xul.  Next, we need to import the overlay content into the main XUL file of the application; in this case, I am using the XUL editor created in previous articles as an example.  Near the top of the file, add the following processing instruction:

<?xul-overlay
href="chrome://interface/content/newmenuOverlay.xul"?>

Finally, in the location that you would like the new menu to appear, add this code:

<menu id="overlaidMenu" label="New Menu"/>

As you can see, the ID of the element in both the overlay file itself, and the final line of code in the main application file are the same.  Notice also that the overlay file is understood and processed by Mozilla using a chrome URL, even though we haven’t registered the overlay with the chrome in the same way that we have had to register some of the other key elements of the application such as the DTD and skin files.  The chrome is intelligent enough to pick these up without special instructions.