DOMAgent highlightNode

[brunot...@gmail.com]

When creating an extension for Dev Tools, it's very common to try to mimic some of the stuff presented on the tool itself, like for example highlight a DOM Node. 

I was checking the source code for Dev Tools, and there's some interesting APIs wired to an object named DOMAgent such as highlightNode() and hideHighlight(). They seem to be part of the core API.

DevToolsExtensionAPI.js has this:

if (extensionInfo.exposeWebInspectorNamespace)

        window.webInspector = coreAPI;

But I don't think there's a way to set this "exposeWebInspectorNamespace" variable, but anyway... is there a way to access the DOM highlight API?

For now I created a pretty ugly solution that creates a DIV on the screen :) I also mimic all the styles from Dev Tools, like side panels and tree panels, since I don't see a way to import those too. They all belong to the parent iframe. Would be cool to have access to those too.

Well, I don't want to stretch too much here. If anyone has info on how to highlight a DOM node using the same API from Dev Tools, that would be great!

[Pavel Feldman]

There is currently no extensions API for manipulating nodes. And unfortunately, we are not planning introducing it any time soon. For elements-related functionality, we are suggesting putting additional sidebars in Elements panel. What kind of extension are you working on? How does it interact with DOM?

Regards

Pavel

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Bruno Tavares]

Thanks for the reply. I'm creating an Application Inspector for Sencha frameworks (Ext JS or Touch).

On these frameworks (and others like jQuery UI, Dojo, KendoUI), behind the DOM Nodes there's a JavaScript object that represents the created widget. A grid, a tab panel, a tree panel, etc...

For Sencha Frameworks there's what it's called Component Tree. It's similar to the DOM Tree. My little extension displays the Component Tree and allow devs to navigate over it.

Checking the DOM Tree is very helpful already, and my extension also implements the sidebar panel, but ultimately having a view of the Component Tree alone helps even more. 

That's where I'd like to use the highlight node API. Not allof the core API, just this one :) I'm currently being creative and giving the user a refresh button (since there's no hook for DOM update events), and also implementing the highlight with a absolute positioned div.