Inspector - Modular Version?

[Chad Sowald]

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.

[Mike Ratcliffe]

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

[Chad Sowald]

Hey Mike. Thanks so much for your help. I've got the highlighting
working! Have a nice weekend. ~Chad

On Mar 12, 7:23 pm, Mike Ratcliffe <mich...@ratcliffefamily.org>
wrote:

[Rollercoaster]

Can you this with us please?

--
You received this message because you are subscribed to the Google Groups "Firebug" group.
To post to this group, send email to fir...@googlegroups.com.
To unsubscribe from this group, send email to firebug+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/firebug?hl=en.

[Mike Ratcliffe]

Sorry, how would you like me to help?

[Sebastian Zartner]

Hi John,

if you're programming an add-on for Firefox, you may want to reuse the dev tools inspector:

http://dxr.mozilla.org/mozilla-central/browser/devtools/highlighter/inspector.jsm.html
http://dxr.mozilla.org/mozilla-central/browser/devtools/highlighter/highlighter.jsm.html

Sebastian