Sidebar für FF 146 - Erster Versuch

(function() {
    if (window.jsSidebarActive) return;
    window.jsSidebarActive = true;

    // --- KONFIGURATION ---
    const MIN_TRIGGER_WIDTH = 15;
    const CLOSE_DELAY = 600;
    let currentWidth = 310;
    const BG_TRANSPARENCY = 0.92;

    const sidebar = document.getElementById("sidebar-box");
    const toolbox = document.getElementById("navigator-toolbox");
    const browser = document.getElementById("browser");
    if (!sidebar || !toolbox || !browser) return;

    let isMenuOpen = false;
    let isMouseInSidebar = false;
    let isResizing = false;

    // Hilfsfunktion zur Ermittlung der Seite
    function isSidebarRight() {
        try {
            // Prüfung 1: Direktes Attribut
            if (sidebar.getAttribute("positionend") === "true") return true;
            // Prüfung 2: Firefox Preference (für sofortige Reaktion)
            return !Services.prefs.getBoolPref("sidebar.position_start", true);
        } catch (e) { return false; }
    }

    const style = document.createElement("style");
    style.id = "sidebar-hover-style";
    document.head.appendChild(style);
    
    function updateStyles() {
        const isRight = isSidebarRight();
        const topOffset = toolbox.getBoundingClientRect().height;
        if (topOffset === 0) return;
        
        // WICHTIG: Setzt das Attribut manuell, falls Firefox es verzögert
        sidebar.setAttribute("data-side", isRight ? "right" : "left");
        
        style.textContent = `
            #sidebar-box {
                position: fixed !important;
                z-index: 10000 !important;
                top: ${topOffset}px !important;
                height: calc(100vh - ${topOffset}px) !important;
                width: var(--hover-sidebar-width, ${currentWidth}px) !important;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                background-color: light-dark(rgba(255, 255, 255, ${BG_TRANSPARENCY}), rgba(28, 28, 30, ${BG_TRANSPARENCY})) !important;
                backdrop-filter: blur(15px) saturate(140%);
                border: none !important;
                display: flex !important;
            }
            #sidebar-box[data-side="left"] { 
                left: 0 !important; right: auto !important; 
                border-right: 1px solid var(--chrome-content-separator-color) !important; 
            }
            #sidebar-box[data-side="left"]:not([visible="true"]) { transform: translateX(-100%) !important; }
            
            #sidebar-box[data-side="right"] { 
                right: 0 !important; left: auto !important; 
                border-left: 1px solid var(--chrome-content-separator-color) !important; 
            }
            #sidebar-box[data-side="right"]:not([visible="true"]) { transform: translateX(100%) !important; }
            
            #sidebar-box[visible="true"] { transform: translateX(0) !important; }
            
            #sidebar-resizer-grip {
                position: absolute; top: 0; width: 20px; height: 100%;
                cursor: ew-resize !important; z-index: 10001; background: transparent;
            }
            #sidebar-box[data-side="left"] #sidebar-resizer-grip { right: -10px; left: auto !important; }
            #sidebar-box[data-side="right"] #sidebar-resizer-grip { left: -10px; right: auto !important; }

            #sidebar-box[resizing="true"]::after {
                content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
                z-index: 99999; background: transparent;
            }
            #sidebar-box:not([visible="true"]) { pointer-events: none !important; }
            #sidebar-splitter { display: none !important; }
            #sidebar-header { background-color: transparent !important; }
        `;
    }

    // --- OBSERVER FÜR SOFORTIGES UMSCHALTEN ---
    // Wir beobachten das Browser-Element auf Änderungen der Sidebar-Struktur
    const sideObserver = new MutationObserver(() => {
        updateStyles();
    });
    sideObserver.observe(browser, { childList: true, attributes: true, subtree: true, attributeFilter: ['positionend', 'style'] });

    // Preference Observer als Fallback
    const prefBranch = Services.prefs.getBranch("sidebar.");
    const prefObserver = {
        observe: function(subject, topic, data) {
            if (data === "position_start") updateStyles();
        }
    };
    prefBranch.addObserver("position_start", prefObserver);

    // Initiale Ausführung
    setTimeout(updateStyles, 100);
    window.addEventListener("resize", updateStyles);

    // Popups (Menüs)
    window.addEventListener("popupshown", (e) => {
        if (e.target.id === "sidebarMenu-popup" || e.target.getAttribute("viewid")?.startsWith("sidebar-")) isMenuOpen = true;
    }, true);
    window.addEventListener("popuphidden", (e) => {
        if (e.target.id === "sidebarMenu-popup" || e.target.getAttribute("viewid")?.startsWith("sidebar-")) {
            isMenuOpen = false;
            if (!isMouseInSidebar) startCloseTimer();
        }
    }, true);

    let closeTimer = null;
    function startCloseTimer() {
        if (closeTimer) clearTimeout(closeTimer);
        closeTimer = setTimeout(() => {
            if (!isMouseInSidebar && !isMenuOpen && !isResizing) {
                sidebar.setAttribute("visible", "false");
            }
            closeTimer = null;
        }, CLOSE_DELAY);
    }

    window.addEventListener("mousemove", (e) => {
        if (isResizing) return;
        const isRight = isSidebarRight();
        const inTrigger = isRight ? (e.clientX >= window.innerWidth - MIN_TRIGGER_WIDTH) : (e.clientX <= MIN_TRIGGER_WIDTH);
        if (inTrigger) {
            if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
            sidebar.setAttribute("visible", "true");
        }
    }, { passive: true });

    sidebar.addEventListener("mouseenter", () => {
        isMouseInSidebar = true;
        if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
    });

    sidebar.addEventListener("mouseleave", () => {
        isMouseInSidebar = false;
        if (!isResizing && sidebar.getAttribute("visible") === "true") startCloseTimer();
    });

    // --- RESIZE LOGIK ---
    const grip = document.createElement("div");
    grip.id = "sidebar-resizer-grip";
    sidebar.appendChild(grip);

    grip.addEventListener("mousedown", (e) => {
        isResizing = true;
        sidebar.setAttribute("resizing", "true");
        sidebar.style.transition = "none";
        const isRight = isSidebarRight();
        const startX = e.clientX;
        const startWidth = currentWidth;

        const doResize = (me) => {
            me.preventDefault();
            let diff = me.clientX - startX;
            let newWidth = isRight ? (startWidth - diff) : (startWidth + diff);
            if (newWidth > 50 && newWidth < window.innerWidth * 0.9) {
                currentWidth = newWidth;
                sidebar.style.setProperty("--hover-sidebar-width", currentWidth + "px");
            }
        };

        const stopResize = () => {
            isResizing = false;
            sidebar.removeAttribute("resizing");
            sidebar.style.transition = "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)";
            window.removeEventListener("mousemove", doResize, true);
            window.removeEventListener("mouseup", stopResize, true);
            if (!isMouseInSidebar) startCloseTimer();
        };

        window.addEventListener("mousemove", doResize, true);
        window.addEventListener("mouseup", stopResize, true);
        e.preventDefault();
    }, true);

    window.addEventListener("mousedown", (e) => {
        if (sidebar.getAttribute("visible") !== "true" || isMenuOpen || isResizing) return;
        const isRight = isSidebarRight();
        const isOutside = isRight ? (e.clientX < (window.innerWidth - currentWidth)) : (e.clientX > currentWidth);
        if (isOutside) sidebar.setAttribute("visible", "false");
    }, true);

})();