如何调整 Firefox Add-on SDK 弹出/面板的大小？ Firefox Add-on SDK 弹出/面板太小答案

【问题标题】：How do I size a Firefox Add-on SDK popup/panel? Firefox Add-on SDK popup/panel too small如何调整 Firefox Add-on SDK 弹出/面板的大小？ Firefox Add-on SDK 弹出/面板太小
【发布时间】：2016-07-07 23:37:21
【问题描述】：

我在 Firefox 中关注了tutorial on creating a popup for an add-on，效果很好。

我现在遇到的问题是它创建的弹出窗口不会改变大小以适应我添加到其中的内容。相反，它会添加滚动条。

那么，如何更改 Firefox Add-on SDK 弹出窗口的大小以显示所有内容？

【问题讨论】：

如果您询问如何让面板自动调整大小以适合您的内容，请澄清您的问题。如果您正在寻找如何指定面板的height 和width，那么您应该在documentation for the panel() constructor 中找到了这个。这些属性是列出的前两个。当您有问题时，阅读您正在使用的方法的基本文档应该是您首先要做的事情之一。面板文档页面是教程中的第一个链接。

标签： css popup firefox-addon firefox-addon-sdk

【解决方案1】：

你必须自己处理。

如果您在创建面板时已经知道所需的大小，则可以将height 和width 作为对象的属性传递给Panel() 构造函数。

创建面板后，可以通过设置height 和width 属性来更改其大小。

height 和 width 值是以像素为单位的数字。

有关如何使用面板的完整文档，请参阅 https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel。

【讨论】：

【解决方案2】：

虽然教程和文档从来没有说过，但面板的高度和宽度始终默认为相同的小尺寸。

要更改它，您可以使用height and width parameters for the panel class。

如果您希望它自动更改，您可以使用以下代码：

//index.js
var panel = require("sdk/panel").Panel({
    height: 200,  //choose your default
    width: 200,
    contentURL: data.url("popup.html"),
    contentScriptFile: data.url("auto_resize_popup.js")
});

panel.port.on("resize", function (size) {
    console.log(size);
    panel.resize(size.width, size.height);
});

...

//auto_resize_popup.js

    var content = document.body;
    var size = {};
    size.width = content.offsetWidth + 2;  //2 extra pixels get rid of scroll bars
    size.height = content.offsetHeight + 2;
    self.port.emit("resize", size);

【讨论】：