Panel tranparency firefox addon

5
votes

I'm programming a firefox addon and using a panel to display info on a video, everything works fine althought I can't make the panel transparent. I define the panel styling in the html file as follow:

<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 the panel is not transparent only the text area is. I tried with:

opacity:1 for textarea

It doesn't work either way. What am I doing wrong? Is this even possible?

From what I understand :

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

only applies to the panel content not to the panel itself. I found a post on this subject but it is outdated since the sdk/panel.js mentionned in the post is not the same anymore.

Anyway I tried downloading the panel.js and replacing the current one, but it doesn't seem to affect the panel I display at all. The panel is still white and the border-radius option does not work either. (I should say that I replaced all the "./" with "sdk/" as mentionned in that post).

4
javascriptfirefox-addonfirefox-addon-sdk
Anyone could give me a tip for what to look for? It might be the dumbest question but I really have no clue. Your help would be greatly appreciated! - 2A-66-42
Your question only contains HTML code. It does not contain any code that shows how you create the panel. A full minimal reproducible example is usually best, so that if anyone wants to actually work on an answer to your question they do not have to create everything from scratch (i.e. you should make it easier, not harder, for people to answer your questions). It also helps keep everyone on the same page as to what is actually desired. Code is also required for a question to be on-topic for stack overfflow when you are asking a question about making code work the way you want (i.e. debugging). - Makyen

4 Answers

3
votes

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
votes

You can't style the panel provided in the SDK, only the content but you can definitely follow the procedure you mention and provide your modified panel.

1
votes

I had to solve this same problem today (transparent panel in SDK). The trick is getting at the 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 it helps some other person in the next 1-5 years ;-)

0
votes

I found out that you could create a panel with transparency this way:

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 remember to set the path to your ".html" as:
"resource://"id of your addon"-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 Noitidart for the help.