Can we add a XUL splitter in a FireBug Side Panel?

[Dhruva Ray]

Hi

I need to create a XUL splitter element in my Firebug side panel. As per my understanding, you cannot directly put XUL element tags in Domplate. So I did some workarounds which are not working. Any help on how to resolve this would be appreciated.

My DOMPlate code is 

        with (Domplate) {

            //xtends DOMReps (via require "firebug/dom/domReps")

            aPanel.prototype.panelReps= domplate(DOMReps.DirTablePlate, {

                VIZ:IFRAME({src:"chrome://xxx/content/panels/viz.xul",

                    width:"100%",

                    height:"50%",

                    frameborder:"0"

                }),

                //Would ideally like a xul splitter tag here

                DATA({width:"100%", height:"50%"})

            });

        }

In my Firebug side panel initialize, I do this

this.panelReps.VIZ.replace({}, this.panelNode);

//Even something like this does not work

//panelNode.innerHTML += "<splitter/>

this.timeline.DATA.append({}, this.panelNode);

//tag template is from the extended DOMReps

this.timeline.tag.append({object:data}, this.panelNode.lastChild);

Can you give me a way forward? Thanks!

Dhruva Ray

[Sebastian Zartner]

What's the main purpose to add this splitter? Note that we added a new button to toggle the side panels display in 1.12 and we intentionally avoided to use a splitter.

Sebastian

[Dhruva Ray]

What you mention is the ability to toggle (minimize) a side panel. What i wanted was inside a side panel, a horizontal splitter via Domplate or otherwise? Is that possible? Or I am mis-reading your comment.

Thanks,

Dhruva Ray

[Jan Honza Odvarko]

Note that panel content is HTML

This is the place where <browser> element is used to represent the side panel content.
https://github.com/firebug/firebug/blob/master/extension/content/firebug/firebugOverlay.xul#L443

... and you can't insert XUL elements into HTML page.

Honza

[Simon Lindholm]

Well, you can, but not through innerHTML which is what domplate uses. (IIRC.) So try

el = document.createElement("splitter");
panelNode.appendChild(el);

(or with panelNode.ownerDocument, or createElementNS(..., some xul namespace), I don't really know how XUL works.)

[Jan Honza Odvarko]

On Tuesday, August 13, 2013 7:29:27 PM UTC+2, Simon Lindholm wrote:

Well, you can, but not through innerHTML which is what domplate uses. (IIRC.) So try

Ah, good to know.

In any case, I don't have good experience when inserting HTML into XUL documents.
Mixing XUL and HTML is often problematic, but perhaps depends on complexity
of the markup.

Honza

 

[Dhruva Ray]

Simon : Thanks! I will try that out and post what happens.

Honza : It appears from your comment that you would prefer not to mix XUL and HTML elements in a Firebug extension. Would you be so kind to share an approach when we release the extension source? Just as an aside, I just need a XUL splitter element to split my side panel into 2 parts. 

Thanks,

Dhruva Ray

[Jan Honza Odvarko]

On Thursday, August 15, 2013 4:41:21 AM UTC+2, Dhruva Ray wrote:

Simon : Thanks! I will try that out and post what happens.

Honza : It appears from your comment that you would prefer not to mix XUL and HTML elements in a Firebug extension.

Yep, exactly, I just have bad experience with it.
 

Would you be so kind to share an approach when we release the extension source? Just as an aside, I just need a XUL splitter element to split my side panel into 2 parts. 

Sure, just ping me here or through my email odvarko at gmail dot com

Honza

[Jan Honza Odvarko]

Just for future reference.

Here is an example of Firebug extension implementing
HTML based splitter (within a Firebug panel) and utilizing
existing Firebug API.

https://github.com/firebug/extension-examples/tree/master/PanelSplitter

Honza

[Dhruva Ray]

Thank you Honza for providing a working example! This is exactly what I need for our side-panels!

-Dhruva

[Jan Honza Odvarko]

On Wednesday, August 21, 2013 8:52:19 AM UTC+2, Dhruva Ray wrote:

Thank you Honza for providing a working example! This is exactly what I need for our side-panels!

Excellent

:-)

Honza