Question

我正在使用SDK编写Firefox扩展程序，并且无法以正确的大小弹出窗口。我正在使用MDN和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});
});

反复打开面板（通过点击togglebutton）会以我不理解的方式更改尺寸：

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更改：

INotifypropertyChanged

使Firefox SDK面板适合每个外观

1 个答案: