Firefox XUL toolbar problem with javascript getElementById

Question

I'm writing my first Firefox XUL toolbar, and am getting a strange behavior - in order to debug my code, I call the same js function from both the firefox toolbar and from a button on a very simple HTML file I created.

The javascript function displays an alert window, gets an element using 'document.getElementById', changes its color, and displays another alert window.

The javascript function works well when called using the HTML button, but when using the toolbar button the 'document.getElementById' returns null and the function terminates (only the first alert window shows).

Any guess what can be wrong? I provide the (very simple) code below for refenrece.

Many thanks in advance!

The javascript file - facebrew.js

function FaceBrew_rtlSelection() {
    alert('Before!'); 
  sel_node = document.getElementById("header");
    sel_node.style.color = 'blue';
    alert('After!'); 
}

The HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
    <script type="text/javascript" src="http://localhost/Sandbox/FaceBrew/chrome/content/facebrew.js"> </script>
</head>

<body>
<input type="button" value="Click me" id="select" onclick="FaceBrew_rtlSelection()" />
<div id="header">
  <h1>Hello world!< /h1>
</div>
</body>
</html>

The XUL file - facebrew.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://facebrew/skin/facebrew.css" type="text/css"?>

<overlay id="FaceBrew-Overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <script type="application/x-javascript"
            src="chrome://facebrew/content/facebrew.js" />
         
    <toolbox id="navigator-toolbox">
        <toolbar id="FaceBrew-Toolbar" toolbarname="FaceBrew Toolbar" accesskey="F"
                 class="chromeclass-toolbar" context="toolbar-context-menu" 
                 hidden="false" persist="hidden">
            <toolbaritem flex="0">            
                <toolbarbutton id="FaceBrew-Web-Button" tooltiptext=""
                               label="Run" oncommand="FaceBrew_rtlSelection()" />
            </toolbaritem>
        </toolbar>
    </toolbox>
</overlay>

The CSS file - facbrew.css

#FaceBrew-Web-Button {
    list-style-image: url("chrome://facebrew/skin/web.png");
}

Perhaps the document object the toolbar is using isn't the same as the currently-loaded page. — amphetamachine
I forgot to mention - the toolbar code does succeed if the <h1> tags in the HTML file are removed. So I guess the document object is the same for the toolbar and the HTML button. — Omri Allouche

parserr parserr · Accepted Answer · 2010-01-24T17:52:06

as Paul said, when function is called from toolbar, document context is different. get your currently selected HTML document object with:

var doc = gBrowser.selectedBrowser.contentDocument;
doc.getElementById(...);

also, you can always take a look at error console to see why your code is failing (Tools -> Error Console).