How to manipulate the page's DOM while building a Firebug Extension?

[Saravanan Ganesh]

I have a button inside a Firebug panel. On click this must change the padding of an element on the web page, like how editing attributes in the style tab does.

I tried getting the document using this.context.window.document and passing it inside an object to the domplate. But, to no luck.

How do I get hold of the web page's document inside an on click function in domplate or is there another way to manipulate the web page's elements?

[Jan Honza Odvarko]

I don’t know how your domplate template look like

Otherwise, I tried the following:

1)  Create button in HTML panel (firebugOverlay.xul)
<toolbarbutton label="Test"
    class="toolbar-text-button fbInternational"
    oncommand="Firebug.HTMLModule.onTest(event, Firebug.currentContext)"/>


2) Handle the click (htmlModule.js)
    onTest: function(event, context)
    {
        var doc = context.window.document;
        var content = doc.getElementById("content");

        content.style.paddingTop = "50px";
        content.style.border = "1px solid red";
    }

3) Check out the page (there needs to be an element with id=”content”),
the CSS changes are visible.

Honza