DOM tree in extension panel

126 views
Skip to first unread message

Kuziu

unread,
Nov 9, 2011, 1:21:45 PM11/9/11
to Firebug
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

unread,
Nov 10, 2011, 8:57:28 AM11/10/11
to fir...@googlegroups.com
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

unread,
Nov 11, 2011, 5:15:11 AM11/11/11
to Firebug
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

unread,
Nov 15, 2011, 2:59:33 AM11/15/11
to fir...@googlegroups.com
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


Reply all
Reply to author
Forward
0 new messages