Geek Answers Handbook

Tranparency panel firefox addon

I program the firefox addon and use the panel to display information about the video, everything works fine, although I can not make the panel transparent. I define the panel style in the html file as follows:

<html> <head> <meta charset="utf-8" /> <style type="text/css" media="all"> html { opacity:0.1; border-style:none; resize:none; } textarea { background-color:transparent; resize: none; border-style:none; } </style> </head> <body> <textarea id="text" readonly=true rows="3" cols="60"></textarea> </panel> </body> </html>

Except that the panel is not transparent, only the text area. I tried:

opacity:1 for textarea

This does not work. What am I doing wrong? Is it possible?

From what I understand:

 html { opacity:0.1; border-style:none; resize:none; }

applies only to the contents of the panel, not to the panel itself. I found a post on this, but it is deprecated since sdk / panel.js is mentioned in post no longer the same.

In any case, I tried loading the .js panel and replacing the current one, but this does not seem to affect the panel that I am showing at all. The panel still remains white, and the border-radius parameter also does not work. (I have to say that I replaced all "./" with "sdk /" as indicated in the post ).

+5
source share
4 answers

I found out that you can create a panel with transparency as follows:

 var win = Services.wm.getMostRecentWindow('navigator:browser'); var panel = win.document.createElement('panel'); var screen = Services.appShell.hiddenDOMWindow.screen; var props = { noautohide: true, noautofocus: false, level: 'top', style: 'padding:15px; margin:0; width:' + screen.width + 'px; height:' + screen.height + 'px; background-color:rgba(180,180,180,.5);' } for (var p in props) { panel.setAttribute(p, props[p]); } win.document.querySelector('#mainPopupSet').appendChild(panel); panel.addEventListener('dblclick', function () { panel.parentNode.removeChild(panel) }, false); panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);

To embed an iframe, be sure to include the path to your ".html" as:
"resource: //" your addon id is "-at-jetpack / data / custom_panel.html".

Here is my code:

 var win = Services.wm.getMostRecentWindow('navigator:browser'); var panel = win.document.createElement('panel'); var screen = Services.appShell.hiddenDOMWindow.screen; var props = { noautohide: true, noautofocus: false, backdrag: true, level: 'top', style: 'padding:10px; margin:0; width:530px; height:90px; background-color:rgba(180,180,180,.5);' } for (var p in props) { panel.setAttribute(p, props[p]); } var iframe = win.document.createElement('iframe'); iframe.setAttribute('src','resource://"id of your addon"-at-jetpack/data/custom_panel.html'); panel.appendChild(iframe); win.document.querySelector('#mainPopupSet').appendChild(panel); panel.addEventListener('dblclick', function () { panel.parentNode.removeChild(panel) }, false); panel.openPopup(null, 'overlap', screen.availLeft+screen.width/2-256, screen.availTop+760);

Thanks to Noitidart for the help.

0
source

Ok, here is the sdk solution of pure addon:

 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);');
+3
source

You cannot create a panel contained in the SDK, only content, but you can follow the procedure described by you exactly and provide your own modified panel.

+1
source

I had to solve the same problem today (transparent panel in the SDK). The trick gets anonymous content:

 function makePanelTransparent() { // Get the panel element in the XUL DOM and make its background transparent. const { getActiveView } = require('sdk/view/core'); const el = getActiveView(panel); el.style.background = 'rgba(0,0,0,0)'; // Go up the XUL DOM till you hit the Document (nodeType 9). let parentNode = el; while (parentNode !== null && parentNode.nodeType !== 9) { parentNode = parentNode.parentNode; } if (!parentNode) { console.error('unable to find the document parent; giving up'); return; } // Now that we've found it, call the document a document. const xulDocument = parentNode; // Use the document pointer to access and style 'anonymous' content. const xulContainer = xulDocument.getAnonymousElementByAttribute(el, 'class', 'panel-arrowcontent') xulContainer.style.background = 'rgba(0,0,0,0)'; xulContainer.style.boxShadow = 'none'; }

This works for me. Hope this helps another person in the next 1-5 years; -)

+1
source

More articles:


All Articles