Panel alway ontop and opacity

how to make add-on in image?

Sebastian and I got a discussion going: http://stackoverflow.com/questions/32936737/how-to-make-a-firefox-add-on-panel-always-on-top-and-able-to-change-opacity#comment53707047_32936737

This is what I do:

const window = windowUtils.getMostRecentBrowserWindow();
const panel = window.document.createElement("panel");

panel.setAttribute( "id", addonId + "-panel" );
panel.style.backgroundColor = "rgba( 0, 0, 0, 0 )";
panel.style.border = "none";

window.document.getElementById("mainPopupSet").appendChild( panel );

You can open and close the panel with openPopup and hidePopup, check: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/PopupGuide/Panels

And you will probably need an iframe in the panel to display your content: https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/frame_utils#create(document.2C_options)

1 Like

Ok here is a pure addon sdk solution:

let myPanel = Panel({
   width: 180,
   height: 180,
   contentURL: 'data:text/html,<textarea style="width:120px; height:80px;">this is my textarea</textarea>'
})

let { getActiveView }=require("sdk/view/core");
getActiveView(myPanel).setAttribute("noautohide", true);
getActiveView(myPanel).setAttribute("level", 'top');
getActiveView(myPanel).setAttribute("style", 'background-color:rgba(0, 0, 0, 0.2);');
1 Like