Javascript 让Firefox SDK面板适合所有外观_Javascript_Firefox_Firefox Addon Sdk

Javascript 让Firefox SDK面板适合所有外观

javascript firefox

Javascript 让Firefox SDK面板适合所有外观,javascript,firefox,firefox-addon-sdk,Javascript,Firefox,Firefox Addon Sdk,我正在使用SDK编写一个Firefox扩展，但弹出窗口的大小不合适。我正在使用和中的示例来制作类似于MDN页面中该部分所示的示例我制作的面板在第一次打开时有点小，它垂直滚动，但每次打开时高度的变化让我更困惑我的面板有如下HTML代码： <html> <head> <meta charset="utf-8"> </head> <body> <ul id="l

我正在使用SDK编写一个Firefox扩展，但弹出窗口的大小不合适。我正在使用和中的示例来制作类似于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>

其中windowsize.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});
}

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，需要水平和垂直滚动，尽管单词wrapping会导致垂直滚动。

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

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

解决这个问题是一个相对容易的CSS更改：

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

ul {
    display: inline-block;
}