DOM tree in extension panel

[Kuziu]

Hi,

is there easy way to have a DOM tree (like in HTML panel) in my own
extension panel?

I want to inspect only DIV tags. I made it thx to (http://
www.softwareishard.com/blog/firebug-tutorial/extending-firebug-inspector-part-x/)
this tutorial. But I need a tree to see excatly where in DOM I'm.

Now i need to change tab from my to the HTML and HTML tree dom don't
have selected element that I selected on my Tab.

[Jan Honza Odvarko]

Yes this should be possible (I am thinking about new part of the extension tutorial :)

For now you need to look how the HTML panel rendering starts.
Check out the Firebug.HTMLPanel.updateSelection (firebug/html/htmlPanel module)

At this moment it's this code:
http://code.google.com/p/fbug/source/browse/branches/firebug1.9/content/firebug/html/htmlPanel.js#1306

The API is not entirely clean, but perhaps we could improve it upon your feedback. If you have specific request please report a new issue here: http://code.google.com/p/fbug/issues/list
and we can discuss further.

Honza

[Kuziu]

Hmmm or maby You know how to expand node in DOM TREE from other panel.

I want to select node in my panel and expand tree + select this node
in DOM TREE in HTML panel.

Think it will be easier for me :/

Thx

[Jan Honza Odvarko]

On Friday, November 11, 2011 11:15:11 AM UTC+1, Kuziu wrote:

Hmmm or maby You know how to expand node in DOM TREE from other panel.

I want to select node in my panel and expand tree + select this node
in DOM TREE in HTML panel.

The following code expects that you have the current context:

// Select the HTML panel

var panel = Firebug.chrome.selectPanel("html");

// Get an element from the page document you want to select
var content = context.window.document.getElementById("my-element");

// Update selection in the HTML panel (expanding happens automatically)
panel.select(content);

Honza