Firebug Inspect Element Feature using the .NET Framework and JavaScript

Hello JavaScripters! I was hoping you could help me with an application I'm working on using C# and the .NET Framework that incorporates Javascript. I'm trying to do something similar to to the FireBug / Firefox Inspect Element (http://getfirebug.com/html) feature:

http://img856.imageshack.us/img856/2155/5yzai.png

I came across http://www.selectorgadget.com/ which is exactly what I'm trying to do. It's in Javascript and after looking through the source code for the past 2 hours I still don't have a clue how to incorporate it into my program...

From what I can tell it uses tokenizing and recursive analysis of DOM elements to figure out CSS selector paths: http://www.selectorgadget.com/stable/lib/dom.js.

http://img217.imageshack.us/img217/5927/browserp.png

Here is what I have so far. The javascript code highlights HTML elements such as a <table> tag and changes the border and background color.



document.onmouseover = dohighlight;
document.onmouseout = dohighlightoff;

var BGCOLOR = "#444444";
var BORDERCOLOR = "#FF0000";

// Highlight <table> in grey
function dohighlight()
{
var elem = window.event.srcElement;

while (elem!=null && elem.tagName!="TABLE")
elem = elem.parentElement;

if (elem==null) return;

if (elem.border==0)
{
elem.border = 1;

// store current values in custom tag attributes
//
elem.oldcolor = elem.style.backgroundColor; // store backgroundcolor
elem.style.backgroundColor = BGCOLOR; // new background color

elem.oldbordercolor = elem.style.borderColor; // same with bordercolor
elem.style.borderColor = BORDERCOLOR;

var rng = document.body.createTextRange();
rng.moveToElementText(elem);

// Make a red border around <table>
function dohighlightoff()
{
var elem = window.event.srcElement;

while (elem!=null && elem.tagName!="TABLE")
elem = elem.parentElement;

if (elem==null) return;

if (elem.border==1)
{
elem.border = 0;

// recover values from custom tag attribute values
elem.style.backgroundColor = elem.oldcolor;
elem.style.borderColor = elem.oldbordercolor;
}
}


Any ideas on how to incorporate the Selectorgadget into my program would be greatly appreciated!

Selectorgadget Source Code: https://github.com/iterationlabs/selectorgadget

delete