让 Firefox SDK 面板适应各种外观

Question

我正在使用 SDK 编写 Firefox 扩展程序，但无法以正确的大小弹出。我正在使用 MDN and SO 中的示例来制作类似于 MDN 页面该部分中显示的示例的内容。

第一次打开时我制作的面板有点小（垂直滚动），但每次打开时变化的高度让我更困惑。

我的面板有 HTML 这样的代码：

<html>
    <head>
            <meta charset="utf-8">
    </head>
    <body>
            <ul id="links">
                    <li id="menu1">Menu1 text</li>
                    <li id="menu2">Menu2 text</li>
                    <li id="menu3">Menu3 text</li>
            </ul>
    </body>
</html>

在我的 index.js 中，我使用以下内容创建面板：

var button = ToggleButton({
        id: "name-of-extension",
        label: "Label text",
        icon: './icon.svg',
        onChange: handleToggleButton
});
var button_panel = Panel({
        contentURL: './popup_interface.html',
        contentScriptFile: ['./script-for-onclicks.js', './windowsize.js'],
        onHide: handleHidePanel,
        onShow: function() {
            button_panel.port.emit('fetchwinsize');
        }
});
button_panel.port.on('winsize', function(data) {
        console.log(data);
        button_panel.resize(data.width, data.height);
});
function handleToggleButton(state) {
        if (state.checked) {
                button_panel.show({
                        position: button
                });
        } else {
                button_panel.hide();
                handleHidePanel();
        }
}
function handleHidePanel() {
        button.state("window", {checked: false});
}

其中 windowsize.js 具有以下内容：

self.port.on('fetchwinsize', function() {
        let listElement = document.getElementById("links");
        self.port.emit("winsize", {height: listElement.scrollHeight, width: listElement.scrollWidth});
});

重复打开面板（通过单击切换按钮）会以我不理解的方式更改尺寸：

JPM [info] Creating a new profile
console.log: vanir: {"height":48,"width":304}
console.log: vanir: {"height":48,"width":272}
console.log: vanir: {"height":48,"width":240}
console.log: vanir: {"height":48,"width":208}
console.log: vanir: {"height":64,"width":176}
console.log: vanir: {"height":64,"width":144}
console.log: vanir: {"height":96,"width":129}

此后尺寸保持不变为96x129，需要水平和垂直滚动（虽然自动换行导致垂直滚动）。

Answer 1

我通过电子邮件向 William Bamberg 发送了 MDN 示例的源代码，他意识到了这个问题。

如果有人也尝试这样做，问题是面板的总大小（包括填充和边距）被设置为列表元素的大小，每次都会挤压列表元素。

事实证明，修复此问题相对容易 CSS 更改：

html, body, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul {
    display: inline-block;
}

让 Firefox SDK 面板适应各种外观

Making Firefox SDK panel fit on every apperance

javascript

firefox

firefox-addon-sdk