create-panel.uc.mjs

// ==UserScript==
// @name         Create a panel
// @description  yes
// @author       me
// @include      main
// ==/UserScript==

const lazy = {};
ChromeUtils.defineESModuleGetters(lazy, {
	PanelMultiView: "resource:///modules/PanelMultiView.sys.mjs",
	Utils: "chrome://userchromejs/content/uc_api.sys.mjs",
});

const PANEL_ID = "my-panel";

const popupSet = document.getElementById("mainPopupSet");
popupSet.appendChild(
	MozXULElement.parseXULToFragment(`
		<panel
			id="${PANEL_ID}"
			class="panel-no-padding"
			type="arrow"
			orient="vertical"
			tabspecific="true"
		>
			<box class="panel-header">
				<html:h1>
					<html:span>Title</html:span>
				</html:h1>
			</box>
			<toolbarseparator />
			<vbox class="panel-subview-body">
				<vbox flex="1">
					<checkbox />
					<checkbox />
				</vbox>
				<toolbarseparator />
				<html:moz-button-group class="panel-footer">
					<button class="footer-button" default="true">abc</button>
					<button class="footer-button">abc2</button>
				</html:moz-button-group>
			</vbox>
		</panel>
	`),
);
const popup = document.getElementById(PANEL_ID);

lazy.Utils.createWidget({
	id: "panel-button",
	type: "toolbarbutton",
	image: "chrome://browser/skin/window.svg",
	callback: (event) => {
		const { target } = event;
		event.preventDefault();

		if (target.getAttribute("open") === "true") {
			return;
		}

		console.log(popup);
		popup.addEventListener(
			"popuphidden",
			() => {
				target.removeAttribute("open");
				target.setAttribute("aria-expanded", "false");
			},
			{ once: true },
		);
		target.setAttribute("open", "true");
		target.setAttribute("aria-expanded", "true");

		lazy.PanelMultiView.openPopup(popup, target, {
			position: "bottomleft topleft",
			triggerEvent: event,
		}).catch(console.error);
	},
});