Panel example (not only) for Custom Buttons for Firefox

panel.js

// https://gist.github.com/Infocatcher/979c6ac08f86554ab7af
(function() {

var uri = "https://addons.mozilla.org/";
var initialSize = 300;
var horizontal = true;
var before = true;
var inTab = true;
var textZoom = 1;
var fullZoom = 1;
var scrollX = 0;
var scrollY = 0;

if(inTab)
	var selectedBrowser = gBrowser.selectedBrowser;
var uid = inTab ? gBrowser.getNotificationBox(selectedBrowser).id.replace(/^[a-z-]+/, "") : "";
var panelId = "customButtons_splitPanel" + uid;
var splitterId = "customButtons_splitPanel" + uid + "-resizer";

var panel = document.getElementById(panelId);
function closePanel() {
	var rc = function(node) {
		node && node.parentNode.removeChild(node);
	};
	rc(panel);
	rc(document.getElementById(splitterId));
}
if(panel) {
	closePanel();
	return;
}
panel = document.createElement(horizontal ? "vbox" : "hbox");
panel.id = panelId;

var browser = document.createElement("browser");
browser.setAttribute("type", "content");
browser.setAttribute("src", uri);
browser.setAttribute("flex", "1");
browser.setAttribute(horizontal ? "height" : "width", initialSize);
if(scrollX || scrollY) {
	var scrollTimer = setInterval(function() {
		var win = browser.contentWindow;
		win.scrollTo(scrollX, scrollY);
		if(win.scrollX == scrollX && win.scrollY == scrollY) {
			clearInterval(scrollTimer);
			scrollTimer = 0;
			browser.removeEventListener("load", onLoad, true);
		}
	}, 50);
	var onLoad = function(e) {
		browser.removeEventListener("load", onLoad, true);
		if(scrollTimer) {
			clearInterval(scrollTimer);
			scrollTimer = 0;
		}
		browser.contentWindow.scrollTo(scrollX, scrollY);
	};
	browser.addEventListener("load", onLoad, true);
}
panel.appendChild(browser);

var splitter = document.createElement("splitter");
splitter.id = splitterId;
splitter.setAttribute("orient", horizontal ? "vertical" : "horizontal");
splitter.onclick = function(e) {
	if(e.button == 1)
		closePanel();
};
splitter.ondblclick = function(e) {
	if(e.button == 0)
		closePanel();
};

if(inTab) {
	var panelBox = horizontal
		? gBrowser.getBrowserContainer(selectedBrowser)
		: gBrowser.getSidebarContainer(selectedBrowser);
}
else {
	var panelBox = document.getElementById(horizontal ? "appcontent" : "browser");
}
if(before) {
	var insPos = panelBox.firstChild;
	panelBox.insertBefore(panel, insPos);
	panelBox.insertBefore(splitter, insPos);
}
else {
	var insPos = null;
	for(var node = panelBox.lastChild; node; node = node.previousSibling) {
		var bo = node.boxObject;
		if(bo.width && bo.height) {
			// Insert after last visible node, splitter may work wrong otherwise
			insPos = node.nextSibling;
			break;
		}
	}
	panelBox.insertBefore(splitter, insPos);
	panelBox.insertBefore(panel, insPos);
}

if(textZoom != 1 || fullZoom != 1) {
	var viewer = browser.markupDocumentViewer;
	viewer.textZoom = textZoom;
	viewer.fullZoom = fullZoom;
}

})();

panelClone.js

// https://gist.github.com/Infocatcher/979c6ac08f86554ab7af
(function() {

var origTab = gBrowser.selectedTab;
var initialSize = 300;
var horizontal = true;
var before = true;
var inTab = true;

var useSwap = false;
// true  - clone original tab and move original tab into panel
// false - inherit parameters manually

if(useSwap && !("_swapBrowserDocShells" in gBrowser))
	useSwap = false;

if(inTab)
	var selectedBrowser = gBrowser.selectedBrowser;
var uid = inTab ? gBrowser.getNotificationBox(selectedBrowser).id.replace(/^[a-z-]+/, "") : "";
var panelId = "customButtons_splitPanel" + uid;
var splitterId = "customButtons_splitPanel" + uid + "-resizer";

var panel = document.getElementById(panelId);
function closePanel() {
	var rc = function(node) {
		node && node.parentNode.removeChild(node);
	};
	rc(panel);
	rc(document.getElementById(splitterId));
}
if(panel) {
	closePanel();
	return;
}

if(useSwap) {
	var clonedTab = gBrowser.selectedTab = gBrowser.duplicateTab(origTab);
	var pos = "_tPos" in origTab
		? origTab._tPos
		: Array.indexOf(gBrowser.tabs, origTab); // SeaMonkey
	gBrowser.moveTabTo(clonedTab, pos);
	if(inTab) {
		selectedBrowser = gBrowser.selectedBrowser;
		uid = gBrowser.getNotificationBox(selectedBrowser).id.replace(/^[a-z-]+/, "");
		panelId = "customButtons_splitPanel" + uid;
		splitterId = "customButtons_splitPanel" + uid + "-resizer";
	}
}

panel = document.createElement(horizontal ? "vbox" : "hbox");
panel.id = panelId;

var browser = document.createElement("browser");
browser.setAttribute("type", "content");
//browser.setAttribute("src", uri);
browser.setAttribute("flex", "1");
browser.setAttribute(horizontal ? "height" : "width", initialSize);
panel.appendChild(browser);

var splitter = document.createElement("splitter");
splitter.id = splitterId;
splitter.setAttribute("orient", horizontal ? "vertical" : "horizontal");
splitter.onclick = function(e) {
	if(e.button == 1)
		closePanel();
};
splitter.ondblclick = function(e) {
	if(e.button == 0)
		closePanel();
};

if(inTab) {
	var panelBox = horizontal
		? gBrowser.getBrowserContainer(selectedBrowser)
		: gBrowser.getSidebarContainer(selectedBrowser);
}
else {
	var panelBox = document.getElementById(horizontal ? "appcontent" : "browser");
}
if(before) {
	var insPos = panelBox.firstChild;
	panelBox.insertBefore(panel, insPos);
	panelBox.insertBefore(splitter, insPos);
}
else {
	var insPos = null;
	for(var node = panelBox.lastChild; node; node = node.previousSibling) {
		var bo = node.boxObject;
		if(bo.width && bo.height) {
			// Insert after last visible node, splitter may work wrong otherwise
			insPos = node.nextSibling;
			break;
		}
	}
	panelBox.insertBefore(splitter, insPos);
	panelBox.insertBefore(panel, insPos);
}

if(useSwap) {
	browser.stop();
	gBrowser._swapBrowserDocShells(origTab, browser);
	gBrowser.removeTab(origTab);
}
else {
	var origBrowser = origTab.linkedBrowser;

	var scrollX = origBrowser.contentWindow.scrollX;
	var scrollY = origBrowser.contentWindow.scrollY;
	if(scrollX || scrollY) {
		var scrollTimer = setInterval(function() {
			var win = browser.contentWindow;
			win.scrollTo(scrollX, scrollY);
			if(win.scrollX == scrollX && win.scrollY == scrollY) {
				clearInterval(scrollTimer);
				scrollTimer = 0;
				browser.removeEventListener("load", onLoad, true);
			}
		}, 50);
		var onLoad = function(e) {
			browser.removeEventListener("load", onLoad, true);
			if(scrollTimer) {
				clearInterval(scrollTimer);
				scrollTimer = 0;
			}
			browser.contentWindow.scrollTo(scrollX, scrollY);
		};
		browser.addEventListener("load", onLoad, true);
	}

	var origViewer = origBrowser.markupDocumentViewer;
	var viewer = browser.markupDocumentViewer;
	viewer.textZoom = origViewer.textZoom;
	viewer.fullZoom = origViewer.fullZoom;

	browser.loadURI(origBrowser.currentURI.spec);
}

})();