Button that opens a new panel and Another Button that opens a new tab

Add-ons Development
#10

Can you put it into code formatting? There should be a little button that looks like </> just highlight the code and click it.

#13 
<!--firstPanel.html-->

<!doctype html>

<head>
    <title>First Panel</title>
    </head>
    <body>
    <p>This is the first panel</p>
    <input type="button" name="button" value="Hello"/>
    
    </body>
    </html>
#14

You need a second button there.

#17 
<html>
<body>
<p>First Panel</p>
<input type="button" name="button" value="New Panel"><!-- [0] -->
<input type="button" name="button" value="Open Tab"><!-- [1] -->
</body>
</html>

If the comments help.

#19

Is it supposed to open several new tabs when I click the button again without closing the FF extension page?

#20

I’m not sure why it’d doing that, but destroying the panel seems to fix it.

var panels = require("sdk/panel");
var { ToggleButton } = require("sdk/ui/button/toggle");
var newPanel;
var origPanel;

var button = ToggleButton({
    id: "panelButton",
    label: "panelButton",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png" // data/icon-##.png in the addon.
    },
    onChange: showOrig
});

function createNewPanel() {
    newPanel = panels.Panel({
    width: 300,
    height: 400,
    contentURL: "./secondPanel.html" // data/secondPanel.html in the addon.
    });
}

function createOrigPanel() {
    origPanel = panels.Panel({
    width: 300,
    height: 400,
    contentURL: "./firstPanel.html", // data/firstPanel.html in the addon.
    contentScriptFile: "./firstPanel.js" // data/firstPanel.js in the addon.
    });
}

function showOrig(state) {
    if(state.checked) {
        createOrigPanel();
        origPanel.show({
            position: button
        });
        origPanel.port.on("switchPanel", function() {origPanel.hide();createNewPanel();newPanel.show({position: button});});
        origPanel.port.on("showNewTab", function() {origPanel.hide(); require("sdk/tabs").open("https://discourse.mozilla-community.org/t/button-that-opens-a-new-panel-and-another-button-that-opens-a-new-tab/3442");}); // The page you want to open
    }
    else {
        origPanel.destroy();
        newPanel.destroy();
    }
}

I’ve uploaded an example to github

https://github.com/Arenlor/feckless-fibula

Keep the form data saved locally and externally
#21

Hey @TheOne you reviewers have any complaints about my solution?

#22

That example looks ok to me.

1 Like
#23

should it still work when I have locally saved data and external saved in terms of keep my saved data

#24

I’m not sure what you’re asking.

#25

something similiar to this

#26

If you give an example of what you’re trying I can probably help.

#28

The only time I see the panel hiding itself is when it opens a new tab. I tried both ways. I’d need to see your full code and everything to be able to help.

#30

nevermind I found a work around thanks anyways

#31

No longer needed I figured it out. :smile:

#33

Hi, is it possible to hide panel when clicking on a specific button? currently panel hides clicking on anywhere in the browser. i am using add-on SDK. Please help

#34

Sorry I am stuck there as well.

#35

Can you explain more fully what the issue is?

#36

Sure, I have the panel open. Then I click somewhere else and by default it closes. I would like it to close only when I click on an exit button.

I have a second issue, so I am on the second panel and I click somewhere else besides the second panel and I have to click the extension button again to open my extension again, but this time its on my first panel.

I think have a close button on both panels will fix the second issue. If not what do you suggest?

#37

I don’t see any option to not have a panel close when you change focus away from it.