How to use panel - 10 common examples

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();
        }
    });

req.onreadystatechange = () => {
		try {
			if(req.readyState!==XMLHttpRequest.DONE) return;
			// TODO: Signal the error with a notice
			if(req.status!==200) return;
			
			let resp = JSON.parse(req.responseText);
			log("resp",resp);
			// TODO: Should we move other notices into TmplPhrases like this one?
			pushNotice(phraseBox["panel"]["panel.forums_order_updated"]);
			if(resp.success==1) return;
		} catch(e) {
			console.error("e",e)
		}
		console.trace();
	}
	// ? - Is encodeURIComponent the right function for this?

req.onreadystatechange = () => {
		try {
			if(req.readyState!==XMLHttpRequest.DONE) return;
			// TODO: Signal the error with a notice
			if(req.status===200) {
				let resp = JSON.parse(req.responseText);
				log("resp",resp);
				// TODO: Should we move other notices into TmplPhrases like this one?
				pushNotice(phraseBox["panel"]["panel.themes_menus_items_order_updated"]);
				if(resp.success==1) return;
			}
		} catch(e) {
			console.error("e",e)
		}
		console.trace();
	}
	// ? - Is encodeURIComponent the right function for this?

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();
            }
        });

Stopwatch.Panel.prototype.handleEvent = function(event) {
    if (event.type == 'animationend') {
      Panel.prototype.handleEvent.apply(this, arguments);
      return;
    }

    var swp = priv.get(this);
    var button = priv.get(event.target);

    if (swp.stopwatch && swp.stopwatch[button.action]) {
      try {
        // call action on stopwatch
        var val = swp.stopwatch[button.action]();

        // call panel handler
        this['on' + button.action](val);
      } catch (err) {
        if (err instanceof Stopwatch.MaxLapsException) {
          // do nothing

var onTimerEvent = this.onTimerEvent.bind(this);
    window.addEventListener('timer-start', onTimerEvent);
    window.addEventListener('timer-pause', onTimerEvent);
    window.addEventListener('timer-tick', onTimerEvent);
    window.addEventListener('timer-end', onTimerEvent);
    IntlHelper.observe('timer-hms', this.update.bind(this));
    if (this.visible) {
      // If the timer panel already became visible before we fetched
      // the timer, we must update the display to show the proper
      // timer status.
      this.onvisibilitychange({ detail: { isVisible: true } });
    }
  }.bind(this));
};

Timer.Panel.prototype = Object.create(Panel.prototype);

Timer.Panel.prototype.restoreDefaults = function() {
  return new Promise((resolve) => {
    asyncStorage.getItem('timer-defaults', (values) => {
      values = values || {};
      if (values.sound != null) {
        this.soundButton.value = values.sound;
      }
      if (values.time != null) {
        this.picker.value = values.time;
      }
      if (values.vibrate != null) {
        this.nodes.vibrate.checked = values.vibrate;
      }
      resolve();
    });

var onTimerEvent = this.onTimerEvent.bind(this);
    window.addEventListener('timer-start', onTimerEvent);
    window.addEventListener('timer-pause', onTimerEvent);
    window.addEventListener('timer-tick', onTimerEvent);
    window.addEventListener('timer-end', onTimerEvent);
    IntlHelper.observe('timer-hms', this.update.bind(this));
    if (this.visible) {
      // If the timer panel already became visible before we fetched
      // the timer, we must update the display to show the proper
      // timer status.
      this.onvisibilitychange({ detail: { isVisible: true } });
    }
  }.bind(this));
};

Timer.Panel.prototype = Object.create(Panel.prototype);

Timer.Panel.prototype.restoreDefaults = function() {
  return new Promise((resolve) => {
    asyncStorage.getItem('timer-defaults', (values) => {
      values = values || {};
      if (values.sound != null) {
        this.soundButton.value = values.sound;
      }
      if (values.time != null) {
        this.picker.value = values.time;
      }
      if (values.vibrate != null) {
        this.nodes.vibrate.checked = values.vibrate;
      }
      resolve();
    });

Stopwatch.Panel.prototype.handleEvent = function(event) {
    if (event.type == 'animationend') {
      Panel.prototype.handleEvent.apply(this, arguments);
      return;
    }

    var swp = priv.get(this);
    var button = priv.get(event.target);

    if (swp.stopwatch && swp.stopwatch[button.action]) {
      try {
        // call action on stopwatch
        var val = swp.stopwatch[button.action]();

        // call panel handler
        this['on' + button.action](val);
      } catch (err) {
        if (err instanceof Stopwatch.MaxLapsException) {
          // do nothing