How to use the panel.Panel function in panel

onClick: function(){
            var tabs = require("tabs");
            var currentUrl = tabs.activeTab.url;
            var currentTitle = tabs.activeTab.title;
            if (!selectedText) selectedText = '';
            
            // Create panel for kippt
            var kipptPanel = require("panel").Panel({
                width:430,
                height:240,
                contentURL : "https://kippt.com/extensions/new/?"
                            +"url="+encodeURIComponent(currentUrl)
                            +"&title="+encodeURIComponent(currentTitle)
                            +"&notes="+encodeURIComponent(selectedText)
                            +"&source=firefox",
                contentScript: "setInterval(function(){ if (document.getElementById('submit_clip').value === 'Saved!') { setTimeout(function() { self.port.emit('close', null);}, 700); }}, 500);"
            });
            kipptPanel.port.on("close", function () {
                kipptPanel.destroy();
            });
            
            kipptPanel.show();
        }
    });

init: function() {
            if (isFirefox) {
                sharkzapper.popup.panel = require("panel").Panel({
	                contentURL: getURL("html/sharkzapper_popup.html"),
                    width: 320,
                    height: 180,
                    /* TODO: size will change, it's probably best to set this from popup javascript */
                });
            }
        },
		pin: function() {

// Get the file directory from the prefs,
  // and fallback on the profile directory if not specified
  var dir = prefs.get(config.preferences.log_directory, "");

  if (!dir) {
    dir = Services.dirsvc.get("ProfD", Ci.nsILocalFile);
    dir.append(self.name);

    prefs.set(config.preferences.log_directory, dir.path);
  }

  // Create logger instance
  var logger = new Logger({ dir: dir });

  var contextPanel = require("panel").Panel({
    width: 128,
    height: 107,
    contentURL: [self.data.url("panel/context.html")],
    contentScriptFile: [self.data.url("panel/context.js")],
    contentScriptWhen: "ready"
  });

  // If user clicks a panel entry the appropriate command has to be executed
  contextPanel.port.on("command", function (data) {
    contextPanel.hide();

    switch (data.type) {
      case "log_folder":
        // Show the memchaser directory.
        let nsLocalFile = CC("@mozilla.org/file/local;1",
                                                 "nsILocalFile", "initWithPath");

onMessage: function handleMessage(msg) {
        if (msg == "begin") {
            storage.state = STATE_INTENT;
            mainPanel.hide();
            tabs.activeTab.url = exportURL;
        }
    }
});

var exportPanel = panel.Panel({
    width: 480, height: 300,
    contentURL: data.url("export.html")
});

var importPanel = panel.Panel({
    width: 480, height: 300,
    contentURL: data.url("import.html"),
});

pageMod.PageMod({
    include: ["*.delicious.com"],
    contentScriptWhen: "ready",
    contentScript: "postMessage(window.location.toString());",
    
    onAttach: function onAttach(worker, mod) {
        worker.on("message", function(url) {
            // exportURL is handled by next pageMod
            if (url != exportURL) {
                if (storage.state == STATE_FRESH) mainPanel.show();
            }
        });

exports.main = function(options, callbacks) {
  widgets.add(widgets.Widget({
    label: "Reddit",
    image: "http://www.reddit.com/static/favicon.ico",
    panel: panels.Panel({
      width: 240,
      height: 320,
      contentURL: "http://www.reddit.com/.mobile?keep_extension=True",
      contentScriptURL: [data.url("jquery-1.4.2.min.js"), data.url("panel.js")],
      contentScriptWhen: "ready",
      onMessage: function(message) {
        require("tab-browser").addTab(message);
      }
    })
  }));

  if (options.staticArgs.quitWhenDone)
    callbacks.quit();
};

function QuickBananaBread(url)
{
	if(require("simple-prefs").prefs.notify==true)
	{
		var myIconURL = require("self").data.url("QBB64.png");
    		var notifications = require("notifications");
    		notifications.notify({
        		title: "Quick BananaBread",
        		text: "Ready for the action?",
        		iconURL: myIconURL
    		});
	}
	//require("tabs").open("http://developer.mozilla.org/es/demos/detail/bananabread/launch");
	var quickpanel=require("panel").Panel({
	height: require("simple-prefs").prefs.height,
	width: require("simple-prefs").prefs.width,
	contentURL: "http://developer.mozilla.org/es/demos/detail/bananabread/launch"

	});
	quickpanel.show();
}

var menuItem = mm.Item({
  label: "Quick BananaBread",
  contentScript: 'self.on("click", function () {' +
                 '  self.postMessage(document.URL);' +
                 '});',
  onMessage: function (url) {
   QuickBananaBread(url);
  }
});

require("simple-prefs").on("review",function (){
	require("tabs").open("http://addons.mozilla.org/en/firefox/addon/quick-bananabread");
});


var pluspanel=require("panel").Panel({
	height: require("simple-prefs").prefs.height,
	width: require("simple-prefs").prefs.width,
	contentURL: "http://developer.mozilla.org/es/demos/detail/bananabread/launch"

});

var pluswidget=require("widget").Widget({
	id: "quick-bananabread-widget",
	label: "Quick BananaBread",
	contentURL: require("self").data.url("QBB32.png"), 	
	panel: pluspanel
});



}

/*
The annotationEditor panel is the UI component used for creating
new annotations. It contains a text area for the user to
enter the annotation.

When we are ready to display the editor we assign its 'anchor' property
and call its show() method.

Its content script sends the content of the text area to the add-on
when the user presses the return key.

When we receives this message we create a new annotation using the anchor
and the text the user entered, store it, and hide the panel.
*/
  var annotationEditor = panels.Panel({
    width: 220,
    height: 220,
    contentURL: data.url('editor/annotation-editor.html'),
    contentScriptFile: data.url('editor/annotation-editor.js'),
    onMessage: function(annotationText) {
      if (annotationText)
        handleNewAnnotation(annotationText, this.annotationAnchor);
      annotationEditor.hide();
    },
    onShow: function() {
      this.postMessage('focus');
    }
  });

/*
The annotationList panel is the UI component that lists all the annotations

onAttach: function onAttach(worker, mod) {
    if(!uiReady) {
      let panelAlbumArt = panels.Panel({
        contentURL: data.url('ui/albumArt.html'),
        contentScriptFile: data.url('ui/albumArt.js'),
        width: 222,
        height: 222
      })

      let wgAlbumArt = widgets.Widget({
        label:"Album Art",
        id: 'wgAlbumArt',
        content: '<img style="cursor:pointer;" src="'+data.url('ui/icons/image.png') +
                 '">',
        width: 16,
        panel: panelAlbumArt,
        onClick: function() {
          if(songsQueued) {
            this.panel.show();

function getPlaceInformation(url) {
  let results = utils.spinQuery(conn, {
    "query": "SELECT id, url, title, rev_host FROM moz_places WHERE url = :url",
    "params": {"url" : url},
    "names": ["id", "url", "title"],
  });
  
  if (results.length == 0) {
    return null;
  }

  return results[0];
}

let snapPanel = panel.Panel({
  width: 300,
  height: 300,
  contentURL: self.data.url("snap.html"),
  contentScriptFile: self.data.url("js/snap.js"),
  onShow: function() {
    this.postMessage({"folders":getBookmarkFolders()})
  },
  onMessage: function(data) {
    reportError(JSON.stringify(data));
    if (data.snap) {
      let currentWindow = Svcs.Services.wm.getMostRecentWindow("navigator:browser");
      let gBrowser = currentWindow.gBrowser;
      let visibleTabs = gBrowser.visibleTabs;
      let moveTabs = [];
      let uriList = visibleTabs.filter(function(tab) {
        return (!tab.pinned);