The closest parallel I can draw to context that is used in Firebug is
the window object that is in use. As an example, in the main window
the context would be window but if you were in an iframe in the main
window then the context would be the iframe window.
If you try to add borders or padding to elements it will always
interfere with the page. We use positioned divs to produce the
inspector effect without causing issues on the page.
The pseudocode looks something like:
inject 4 divs into the page with a border of 1px solid blue
on document.mouseover {
rect = event.target.getBoundingClientRect()
size div 1 to (rect.width x 1) and move it to rect.left, rect.top
size div 2 to (1 x rect.height) and move it to rect.right,
rect.top
size div 3 to (rect.width x 1) and move it to rect.left,
rect.bottom
size div 4 to (1 x rect.height) and move it to rect.left, rect.top
attach divs 1 - 4 to document.body
}
on stop inspect {
remove divs 1 - 4 to document.body
}
It would be fairly easy to modularize this simple frame inspector but
to be honest, I don't have time at the moment. As far as the license,
the usual rules apply.
-
Mike Ratcliffe
On Mar 12, 6:26 pm, Chad Sowald <[email protected]> wrote:
> Hi. I am creating an extension (for Chrome right now) and I need to
> allow the user to select any page element like Firebug allows the user
> to do for DOM inspection. I don't actually need to inspect the DOM or
> show CSS or anything, I just want to duplicate the element selection
> process.
>
> I have looked over inspector.js and have implemented a very simple
> version that just adds a border around the element. As you know this
> causes elements to move around as they are hovered over. I really do
> want it to look just like Firebug's element selection with the
> overlay. However, it looks like it won't be as trivial to extract the
> necessary code from the inspector.js file as it also uses the Firebug
> Context object.
>
> After looking over when the context is used, it appears to only be
> used to mark certain elements as non-highlightable, which makes sense.
>
> Is there someone who can modularize the inspector to a single file so
> that something like:
>
> var selector = new ElementSelector(); //ElementSelector is completely
> self-contained in a file like selector.js
> selector.select(function(selectedElement) { //(callback)
> if(selectedElement === null) return //no element selected
>
> //element was selected, do whatever with it now.
>
> });
>
> I understand that the Firebug code uses a BSD 3-clause license. I
> believe I'll just need to copy the firebug license.txt file to my
> extension package and give credit in the code where necessary,
> correct?
>
> Thanks for your help.
--
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.
