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 http://groups.google.com/group/firebug?hl=en.
