Hi Chad, I'm trying to do something similar. Could you share you're results?
On Saturday, March 13, 2010 8:31:26 AM UTC-8, Chad Sowald wrote: > > 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 <[email protected]> > wrote: > > 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 https://groups.google.com/forum/#!forum/firebug
