使Firefox SDK面板适合各种外观

Making Firefox SDK panel fit on every apperance

本文关键字：外观 Firefox SDK      更新时间：2023-09-26

我正在使用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});
});

反复打开面板(通过点击切换按钮)会以我不理解的方式改变尺寸:

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不变，需要水平和垂直滚动(尽管文字换行会导致垂直滚动)。

我给William Bamberg发了一封电子邮件以获取MDN示例的源代码，他意识到了这个问题。

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

修复这是一个相对简单的CSS更改:

html, body, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul {
    display: inline-block;
}
相关文章：