How to overlay xul with no id? - firefox-addon

Question

I'm writing a firefox addon and I'm trying to use an xul overlay to insert a canvas element. The problem is, the parent xul node of where I want to insert the canvas element has no id. Is it possible to do if there's no id? I also tried using the anonid for elements that had no id as you can see below, but had no luck with that either.
My xul overlay:
<?xml version="1.0"?>
<overlay id="myOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<tabbrowser id="content">
<tabbox anonid="tabbox">
<tabpanels anonid="panelcontainer">
<notificationbox>
<stack anonid="browserStack">
<html:canvas id="myCanvas" height="100%" />
</stack>
</notificationbox>
</tabpanels>
</tabbox>
</tabbrowser>
</overlay>
I would like the canvas element to be inserted after each browser element in each tab like this: http://img.photobucket.com/albums/v215/thegooddale/80eae9ee.jpg

Answer 1

There are multiple issues with the attempt to use overlays for this:
Overlays don't work without an ID, they simply don't have another way to address an element.
Overlays cannot apply to something that isn't there when the window loads - they are a one-time thing and cannot consider dynamic elements that are created later.
Overlays cannot apply to anonymous elements (displayed in red in DOM Inspector). These elements are injected by an XBL binding and are not part of the XUL document.
You will have to use JavaScript and inject your canvas "manually" each time. You can use the TabOpen event to get notified whenever a tab is opened. Something like this should work (untested code):
// Always wait for the window to initialize first
window.addEventListener("load", function()
{
function initTab(tab)
{
var browser = window.gBrowser.getBrowserForTab(tab);
var canvas = document.createElementNS("http://www.w3.org/1999/xhtml",
"canvas");
canvas.setAttribute("anonid", "myCanvas");
canvas.setAttribute("height", "100%");
browser.parentNode.appendChild(canvas);
}
// Init all existing tabs first
var tabs = window.gBrowser.tabs;
for (var i = 0; i < tabs.length; i++)
initTab(tabs[i]);
// Listen to TabOpen to init any new tabs opened
window.gBrowser.tabContainer.addEventListener("TabOpen", function(event)
{
initTab(event.target);
}, false);
}, false)
Note that this code sets anonid attribute rather than id - an ID is supposed to be unique, you shouldn't assign the same ID to a dozen elements.

Answer 2

This won't work without an id. You could insert a piece of Javascript in the XUL document, that uses document.querySelector to find the tabpanels inside your XBL binding, and then would append the dynamically-created canvas to id.
However, since a new notificationbox is created every time a new tab is opened, you should have your javascript watch for new tabs and insert the canvasses accordingly.