Geek Answers Handbook

Firefox Add-on SDK: how to make the panel transparent

Firefox add-on development. Anyone can help figure out how to make the panel transparent. Here is the code to display the panel:

var panel = require("sdk/panel").Panel({ width: 570, height: 250, contentURL: require("sdk/self").data.url("test.html") }); panel.show();
+3
source share
1 answer

I found a solution, but this is not very good, since sdk / panel.js does not seem to open a raw Panel object to configure / expand or create another panel from an existing one.

Here:

(1) Get the sdk / panel.js source here: panel.js (raw) or from the sdk folder found in your xpi addon.

(2) Add it to your add-ons as a new file.

(3) Change the required parameters for this cloned file (lines 16-24) so ​​that they point to the correct location from your addon.

Example: change

const { validateOptions: valid } = require('./deprecated/api-utils');

to

const { validateOptions: valid } = require('sdk/deprecated/api-utils');

(4) Find line 137 and modify the css variable as you like. For instance:

 ... let css = [ ".panel-inner-arrowcontent, .panel-arrowcontent {padding: 0;}", //original css rule ".panel-inner-arrowcontent, .panel-arrowcontent {opacity: 0.50; border-radius: 0.35in;}" //additional css rules: semi-transparent panel with rounded borders. ].join(" "); ...

(5) Use a modified version of panel.js instead of the one that comes with sdk.

It should be like that. As I said, this is not particularly elegant.

0
source

More articles:


All Articles