How can I get a bounding box for HTML elements relative to a window?

Question

I am writing a Firefox extension. I am trying to restrict it to just XUL + Javascript (without XPCOM). When I get the mouseover event for an HTML element, I need to get its bounding box in the Windows coordinate system (i.e. the built-in XUL document browser.xul).

The obvious place to start is that you can do something like this in the mouseover event handler:

 var rect = e.target.getBoundingClientRect(); 

This is great, but it gives me rect in the coordinate system of the HTML document, which refers to the upper left corner of the HTML drawing area. I want to display the xul: panel element using panel.openPopup () next to this image (but not using one of the predefined pop-up positions ), so I need to translate the coordinates.

I tried the following (in XUL dom) to get the offset to perform the translation, and it works for some sites, but not for all, and does not seem to take into account the x translation needed for the sidebars.

 var appcontent = document.getElementById("appcontent"); if (appcontent) { chromeOffsetX = r.left; chromeOffsetY = r.top; } 

So what is the best way to approach this?

Note : for IE extensions I would use (and use) IDisplayServices :: TransformRect () -is there something similar for Firefox?

Now with thanks!

Answer 1

It turns out that the location doesn't matter, because you can position the elements relative to the element using something like:

 hoverPanel.openPopup(someElement, "overlap", offsetX, offsetY, false, false); 

Answer 2

This question contains code that processes the x and y elements relative to the visible window. Not sure if he answers your question.