Quelle est la bonne façon d'obtenir une boîte englobante pour les éléments HTML relatifs à la fenêtre?

Question

J'écris une extension Firefox. J'essaie de le limiter à XUL + Javascript (pas de XPCOM). Lorsque j'obtiens un événement mouseover pour un élément HTML, j'ai besoin d'obtenir sa boîte englobante dans le système de coordonnées Windows (c'est-à-dire le document XUL intégré browser.xul).

Le point de départ évident est de mettre quelque chose comme ça dans le gestionnaire d'événement mouseover:

var rect = e.target.getBoundingClientRect(); 

Ce qui est génial, mais cela me donne le rect dans le système de coordonnées du document HTML, qui est par rapport à la coin supérieur gauche de la zone de dessin HTML. Je veux afficher un élément xul: panel en utilisant panel.openPopup() près de cette image (mais en n'utilisant pas l'un des popup positions prédéfinis), j'ai donc besoin de traduire les coordonnées.

J'ai essayé de faire ce qui suit (dans le dom XUL) pour obtenir l'offset pour faire la traduction, et cela fonctionne pour certains sites, mais pas tous, et ne semble pas prendre en compte la traduction x nécessaire pour les barres latérales.

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

Alors, quelle est la meilleure façon d'aborder cela?

Note: pour les extensions IE, j'utiliserais (et j'aurais utilisé) IDisplayServices::TransformRect() -y at-il quelque chose de similaire pour Firefox?

Maintenant, avec la prime!

Answer 1

Transforme Obtenir le lieu est sans importance parce que vous pouvez placer des éléments par rapport à l'élément en utilisant quelque chose comme:

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

Answer 2

This question a un code qui calcule les x et y d'un élément par rapport à la fenêtre visible. Je ne sais pas si cela répond à votre question.