How to display html as firefox panel without using sdk

Question

I need to display html elements as contents of a popup panel using javascript in my firefox addon.

Displaying popup using SDK is what I'm looking for but I don't want to use SDK.

panel:

<popupset id="mainPopupSet">
    <panel id="htmlPanel" type="arrow">
        i want to use html elements like p,div,span, etc here.
    </panel>
</popupset>

javascript to open panel:

document.getElementById('htmlPanel').innerHTML = 'my custom contents';
document.getElementById('htmlPanel').openPopup(null, "before_start", 0, 0, false, false);

it seems some elements are allowed but with different behavior! i also need to set CSS for elements inside panel.

user3559463 · Answer 1 · 2014-09-03T05:21:03.650

I figure it out how to do it using an iframe

changed the XUL as follow:

<popupset id="mainPopupSet">
    <panel id="htmlPanel" type="arrow">
        <html:iframe id="htmlContainer"/>
    </panel>
</popupset>

and create a javascript function to set html contents:

function setupPanel(contents, width, height)
{
    var iframe = document.getElementById("htmlContainer");
    iframe.setAttribute("src","data:text/html;charset=utf-8," + escape(contents));
    iframe.width = width || 300; //default width=300
    iframe.height = height || 300; //default height=300
}

and usage:

setupPanel("<p>this is raw HTML.</p>");
document.getElementById('htmlPanel').openPopup(null, "before_start", 0, 0, false, false);

thanks for your hints.

make sure to use html namespaces on the iframe like @paa did below. otehrwise you will run into problems like on load listeners: http://forums.mozillazine.org/viewtopic.php?f=19&t=2809781&hilit=iframe+html+namespace — Noitidart, Sep 02 '14 at 15:13

score 0 · Answer 2 · answered Sep 02 '14 at 08:29

With animation can copy paste to scratchpad to run it.

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var props = {
    type: 'arrow',
    style: 'width:300px;height:100px;'
}
for (var p in props) {
    panel.setAttribute(p, props[p]);
}

win.document.querySelector('#mainPopupSet').appendChild(panel);

panel.addEventListener('popuphiding', function (e) {
    e.preventDefault();
    e.stopPropagation();
    //panel.removeEventListener('popuphiding', arguments.callee, false); //if dont have this then cant do hidepopup after animation as hiding will be prevented
    panel.addEventListener('transitionend', function () {
        //panel.hidePopup(); //just hide it, if want this then comment out line 19 also uncomment line 16
        panel.parentNode.removeChild(panel); //remove it from dom //if want this then comment out line 18
    }, false);
    panel.ownerDocument.getAnonymousNodes(panel)[0].setAttribute('style', 'transform:translate(0,-50px);opacity:0.9;transition: transform 0.2s ease-in, opacity 0.15s ease-in');
}, false);

panel.openPopup(null, 'overlap', 100, 100);

to display html in it, do createElementNS('html namespace i cant recall right now','iframe') then set the src of this to the html you want it to display

the type:'arrow' here is important

score 0 · Answer 3 · answered Sep 02 '14 at 09:36

Since this appears to be an overlay of browser.xul, if your panel will display static content or a simple template, you can take advantage of the fact that the XHTML namespace is already declared.

<popupset id="mainPopupSet">
  <panel id="htmlPanel" type="arrow">
    <html:div id="htmlplaceholder">
      <html:p>Lorem ipsum</html:p>
      <html:p>foo <html:strong>bar</html:strong></html:p>
    </html:div>
  </panel>
</popupset>

The Add-on SDK hosts the html content inside an iframe, perhaps you should consider this for more complex cases.

How to display html as firefox panel without using sdk

3 Answers3