My solution is to use a transparent XUL panel containing a canvas element that covers the viewport. From there the code is pretty simple ... it goes something like this: o canvas.mousemove to get the mouse coordinates o elementFromPoint(event.LayerX, event.LayerY) to get the element o getBoundingClientRect(element) to get the top, right, bottom and left edges of the element o Draw a box using canvas strokerect
Unfortunately this approach does require an element outside of the document to hold the canvas, otherwise elementFromPoint will always return the canvas. Also, elementFromPoint only gets the top level element but there are plenty of routines online that work around this by hiding and showing elements (Just search google for elementsFromPoint). The tidiest method is the XUL method but there are issues that we are still trying to overcome. If you create a XUL panel and make its background-color transparent then all mouse events pass straight through the panel. I am trying to hijack the autoscroll popup (the transparent overlay used when you click the mousewheel over the browser window) but each OS manages this popup in it's own special way and this makes things very complex. I guess that this info probably does not help you but that is the way that we are trying to get it to work. The greatest advantage of using a canvas element is that people will be able to write extensions to easily extend the inspector. On Jun 8, 9:08 pm, rist <[email protected]> wrote: > I'm trying exactly the same (rebuild "Inspect" with the blue > border) ... > > I've tried the onmouseover-solution but the problem is: > 1) if you set the border of the elements via "style.border" a jiggle > effect occurs. > > So I tried the "create elements with absolute position and z-index"- > version which also has issues: > 2) a new z-index-div will be an overlaying element which hides/covers > the children contained within the originally "mouseovered"-element. > Following mouseover-events or calls for document.elementFromPoint(x, > y) only retrieve the topmost element (your own added element with z- > index) which lies under the mouse position but not the elements in > deeper layers. > > So, is there a way to pass the event through, or a link to the covered > elements? Missed I something? > > John got me curious ... > > > Mike's answer will be: none of the above. He's working on a solution > > that does not alter the web page. > > @Mike: How are you doing this (but I could also live with the current > "Inspect" implementation)? > > Any help is appreciated cause I'm really stuck. :) --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Firebug" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/firebug?hl=en -~----------~----~----~----~------~----~------~--~---
