Firefox附加SDK：如何使面板透明 [英] Firefox Add-on SDK: how to make Panel transparent

问题描述

开发一个Firefox附加组件。任何人都可以请帮忙弄清楚如何使一个面板透明。
这里是显示面板的代码：

  var panel = require（sdk / panel）。Panel （{
 width：570，
 height：250，
 contentURL：require（sdk / self）。data.url（test.html）
}）; 
 panel.show（）; 
  

解决方案

我找到了一个解决方案，因为sdk / panel.js似乎没有公开原始的Panel对象，以调整/扩展或编写另一个面板从现有的。

这里是： （1）获取 .jsrel =nofollow> sdk / panel.js ：

（2）将它添加到你的（3）改变这个克隆文件的需求参数（第16-24行），使它们指向你的插件的正确位置。
$ b示例：
变更
$ b $ p $ const $ {validateOptions：valid} = require（'./ deprecated / api-utils'）;

to

const {validateOptions：valid} = require（'sdk / deprecated / api-utils'）;

$ b

（4） =https://github.com/mozilla/addon-sdk/blob/release/lib/sdk/panel.js#L137 =nofollow>第137行，修改变量 css 给你喜欢的。像这样：

  ... 
 let css = [
.panel-inner-arrowcontent， .panel-arrowcontent {padding：0;}，//原始css规则
.panel-inner-arrowcontent，.panel-arrowcontent {opacity：0.50; border-radius：0.35in;}// additional CSS规则：具有圆形边框的半透明面板。 
] .join（）; 
 ... 
  

（5）使用panel.js的修改版本，而不是一个与sdk一起来的。

应该是这样的。就像我说的那样，它并不是特别优雅。

Developing a Firefox Add-on. Anyone can please help to figure out how to make a Panel transparent. Here is the code to show a panel:

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

解决方案

I found a solution, but it isn't pretty since sdk/panel.js doesn't seem to expose the raw Panel object in order to tweak/extend or compose a another Panel from the existing one.

Here goes:

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

(2) Add it to your addon package as a new file.

(3) Change the requires parameters of 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 variable css to your liking. Like so:

...
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 the modified version of panel.js instead of the one that came with the sdk.

That should be it. Like I said, it isn't particularly elegant.

这篇关于Firefox附加SDK：如何使面板透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！