Qual é a maneira correta de obter uma caixa delimitadora para elementos HTML em relação à Janela?

Estou escrevendo uma extensão do Firefox. Estou tentando limitá-lo a apenas XUL + Javascript (sem XPCOM). Quando eu recebo ummouseover evento para um elemento HTML, preciso obter sua caixa delimitadora no sistema de coordenadas do Windows (que é o navegador de documentos XUL interno.xul).

O lugar óbvio para começar é colocar algo assim no manipulador de eventos do mouseover:

var rect = e.target.getBoundingClientRect();

O que é ótimo, mas isso me dá o correto no sistema de coordenadas do documento HTML, que é relativo ao canto superior esquerdo da área de desenho HTML. Eu quero exibir um elemento xul: panel usando panel.openPopup () perto desta imagem (mas não usando uma das predefinidasposições pop-up), então eu preciso traduzir as coordenadas.

Tentei fazer o seguinte (no domínio XUL) para obter os deslocamentos para fazer a tradução, e funciona em alguns sites, mas não em todos, e não parece levar em consideração a tradução x necessária para as barras laterais.

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

Então, qual é a melhor maneira de abordar isso?

Nota: para extensões do IE eu usaria (e usei)IDisplayServices :: TransformRect ()- existe algo semelhante para o Firefox?

Agora com recompensa!

questionAnswers(2)

yourAnswerToTheQuestion