- Firefox-Version
- Läuft auf 146
- Betriebssystem
- W11
Hallo
Nachdem meine übliche Sidebar von Alice0775 nicht mehr funktionieren wollte und die Lösung von Andreas noch nicht ganz am Ziel war, dachte ich mir ich versuch mal selber was hinzukriegen. Da meine Fähigkeiten zum programmieren eher beschränkt sind habe ich mich mit massiver KI Hilfe Stück für Stück herangearbeitet.
Das Sidebar Skript hat folgende Features und Funktionen:
- ist links/rechts umschaltbar
- Breite ist per Maus anpaßbar wird aber beim Browser Start auf den Wert im Skript gesetzt. (habe keine Möglichkeit gefunden das zu speichern)
- Hintergrund wird automatisch (hell/dunkel) vom Browser Theme setting übernommen
- Transparenz via Parameter einstellbar
- wird immer unterhalb der Menüleisten angezeigt
- Sidebar bleibt offen beim Auswählen der Sidebar Menü Elemente
JavaScript: Juras-Sidebar.uc.js
(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);
})();
Freue mich wenn es brauchbar ist
Juras
