Question

I m writing a Firefox extension. I m trying to limit it to just XUL+Javascript (no XPCOM). When I get a mouseover event for an HTML element, I need to get its bounding box in the windows coordinate system (that is the built-in XUL document browser.xul).

The obvious place to start is to put something like this in the mouseover event handler:

var rect = e.target.getBoundingClientRect();

Which is great, but that gives me the rect in the HTML document s coordinate system, which is relative to the upper left corner of the HTML drawing area. I want to display a xul:panel element using panel.openPopup() near this image (but not using one of the predefined popup positions), so I need to translate the coordinates.

I ve tried doing the following (in the XUL dom) to get the offset s to do the translation, and it works for some sites, but not all, and doesn t seem to take into account the x translation needed for sidebars.

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

So, what s the best way to approach this?

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

Now with bounty!

Answer 1

Turns out getting the location is irrelevant because you can position items relative to the element using something like:

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

友情链接