How to show/hide sidebar from panel

Question

How to show/hide sidebar from panel

814 Views Asked by razz At 04 April 2025 at 14:30

How can i show the sidebar ui component of my addon by clicking on the 'show-sidebar' li in the panel ui component? i tried the following:

panel.html

<body>
    <ul>
        <li onclick="addon.port.emit ('login')">Login</li>
        <li onclick="addon.port.emit ('show-sidebar')">Show Sidebar</li>
    </ul>
</body>

main.js

var sidebar = require("sdk/ui/sidebar").Sidebar ({...});
var panel = require("sdk/panel").Panel (
{
    height: 59,
    width: 120,
    contentURL: Self.data.url("panel.html"),
    contentScriptWhen: "ready",
    onAttach: function()
    {       
        panel.port.on ("login", function (data)
        {
            Tabs.open ("login-page-url");
            panel.hide();
        });

        panel.port.on ("show-sidebar", function (data)
        {
            sidebar.show();
            panel.hide();
        });
    }
});

but it's giving me this error:

console.error: my-addon:
  Message: TypeError: sidebar.show is not a function

Original Q&A

There are 1 best solutions below

**Charles Jourdan** · Answer 1

The inline javascript is not allowed in the embedded html. You should use the property contentScriptFile of Panel.

I post you an example using your code.

data/panel.html

<body>
    <ul>
        <li id="login">Login</li>
        <li id="sidebar">Show Sidebar</li>
    </ul>
</body>

data/script.js

document.getElementById("login").onclick = function(){
    document.getElementById("login").innerHTML = "pouet";
}

document.getElementById("sidebar").onclick = function(){
    self.port.emit("show-sidebar");
}

lib/main.js

var sidebar = require("sdk/ui/sidebar").Sidebar ({
    id: 'my-sidebar',
    title: 'My sidebar',
    url: require("sdk/self").data.url("panel.html")
});
var panel = require("sdk/panel").Panel (
{
    height: 150,
    width: 150,
    contentURL: require("sdk/self").data.url("panel.html"),
    contentScriptFile: require("sdk/self").data.url("script.js"),
    contentScriptWhen: "end"
});

panel.port.on("login", function (data) {
    console.log("event login");
    panel.hide();
});

panel.port.on("show-sidebar", function (data) {
    console.log("event show-sidebar");
    sidebar.show();
    panel.hide();
});

panel.show();

You can use another trigger event for when to loading js file see here. I hope this example can help you.

How to show/hide sidebar from panel

panel.html

main.js

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in FIREFOX-ADDON-SDK

Trending Questions

Popular # Hahtags

Popular Questions