addEventListener("click", (e)=> {
    if (document.activeElement != gBrowser.selectedBrowser) return;
    var text = e.target.tagName.toLowerCase() == "textarea";
    if (text && e.button == 0) {
        popup.showPopup(e.target, -1, -1, "panel", "topright", "bottomright");
        e.target.focus();
    }
    else popup.hidePopup();
}, false, window);

popup.setAttribute('noautohide', 'true');

(listener => {
    addEventListener("focus", listener, true, gBrowser);
    addDestructor(() => listener.textarea && listener.destroy());
})({
    position: "before_end",
    updatePositionInterval: 100,

    handleEvent(e) {
        if (!this.isTarget(e.target)) return;

        var xblURL = "data:application/xml," + encodeURIComponent(`
            <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="${xulns}">
                <binding id="${'CB' + _id.slice(20) + '-bbc-panels'}" role="xul:menupopup" extends="chrome://global/content/bindings/popup.xml#panel">
                    <content>
                        <xul:arrowscrollbox class="popup-internal-box" flex="1" orient="vertical" smoothscroll="false">
                            <children/>
                        </xul:arrowscrollbox>
                    </content>
                </binding>
            </bindings>
        `.trim().replace(/>\s+</g, "><"));
        for(var subPopup of this.subPopups) subPopup.nodeName == "panel"
            && subPopup.style.setProperty("-moz-binding", `url("${xblURL}")`, "important");

        this.handleEvent = e => this[e.type](e);
        this.init(e.target);
    },
    isTarget(node) {
        return node instanceof HTMLTextAreaElement && !node.readOnly
            && node.ownerDocument.defaultView.top == content;
    },
    focus(e) {
        !this.textarea && this.isTarget(e.target) && this.init(e.target);
    },
    init(textarea) {
        this.textarea = textarea;
        popup.setAttribute("noautohide", true);

        this.intervalId = setInterval(() => this.moveToAnchor(), this.updatePositionInterval);
        popup.firstChild.addEventListener("popuphiding", this, false);
        popup.addEventListener("mousedown", this, true);

        popup.openPopup(textarea, this.position);
        setTimeout(() => textarea.focus() || textarea.addEventListener("blur", this, false), 0);
    },
    destroy() {
        popup.removeAttribute("noautohide");

        clearInterval(this.intervalId);
        this.textarea.removeEventListener("blur", this, false);
        popup.firstChild.removeEventListener("popuphiding", this, false);
        popup.removeEventListener("mousedown", this, true);

        popup.hidePopup();
        for(var subPopup of this.subPopups) subPopup.state == "open" && subPopup.hidePopup();
        this.textarea = null;
    },
    moveToAnchor() {
        popup.moveToAnchor(this.textarea, this.position);
        for(var subPopup of this.subPopups) subPopup.anchorNode && subPopup.moveToAnchor(subPopup.anchorNode);
    },
    get subPopups() {
        delete this.subPopups;
        return this.subPopups = [...popup.querySelectorAll("popupset > :first-child")];
    },
    blur(e) {
        !popup.matches(":hover") ? this.destroy() : setTimeout(() =>
            this.textarea.ownerDocument.defaultView.top != content ||
            this.textarea.ownerDocument.visibilityState == "hidden"
                ? this.destroy() : this.textarea.focus()
        , 0);
    },
    popuphiding(e) {
        popup.matches(":hover") && e.preventDefault();
    },
    mousedown() {
        var subPopup = popup.querySelector(`#${popup.id} > hbox > button:hover + popupset > :first-child`);
        if (!subPopup || subPopup.state != "open") return;
        var parent = subPopup.parentNode;
        subPopup.remove();
        setTimeout(() => parent.appendChild(subPopup), 100);
    }
});