Sidebar für FF 146 - Erster Versuch

Horstmann

Zitat von BrokenHeart

Natürlich sollte keine leere Sidebar erscheinen, aber dieses Problem ist entweder gar nicht existent oder man ist genau einmal damit konfrontiert und aktiviert dann die Sidebar.

Hier mal 2 Szenarien mit leerer Sidebar, am Mac im Nigthly.
S. links oben der Buttonstatus, und unten die Sidebar anzeigen Einstellung.
Dann noch das erwähnte Problem, das sich in manchen Kombinationen die Sidebar nicht mehr rechts/links verschieben lässt.

BrokenHeart

Zitat von Sören Hentzschel

Und genau das stimmt nach meinem Test auf zwei Computern eben nicht.1

Also konkret: wenn du z.B. über den Button "Sidebars anzeigen" die Sidebar aktivierst, erscheint bei dir trotzdem eine leere Sidebar?
Das ist bei mir definitiv nicht so!

Wenn du ständig eine leere Seite siehst und die Seitenleiste aktiviert ist, dann einfach auf das Lesezeichen/Chronik-Symbol klicken oder ohne Seitenleiste unter Ansicht den entsprechenden Inhalt aufrufen. Beim nächsten Hovern hat dann die Seitenleiste auch wieder einen Inhalt.

Falls gewünscht, mache ich ein Video...

Horstmann:

Auch dein Szenario kann ich nicht nachstellen. Ich vermute mal, dass das, was du meinst auch mit dem Schließen-Button in der Sidebar zusammenhängt. Wenn du mal diesen Button nicht benutzt, zeigt er dann das gleiche Verhalten?

Horstmann

Zitat von BrokenHeart

Auch dein Szenario kann ich nicht nachstellen. Ich vermute mal, dass das, was du meinst auch mit dem Schließen-Button in der Sidebar zusammenhängt. Wenn du mal diesen Button nicht benutzt, zeigt er dann das gleiche Verhalten?

Das Problem ist halt, dass es das Problem hier gibt, aber nicht geben sollte.
Wobei ich glaube dass Sören auch Macs benutzt, evtl. liegt darin die Ursache, wenn das bei dir nicht reproduzierbar ist.

Würde mich zwar etwas wundern, aber es gibt schon ein paar OS spezifische Feinheiten in der Sidebar und drum herum.

Sören Hentzschel

Zitat von BrokenHeart

Also konkret: wenn du z.B. über den Button "Sidebars anzeigen" die Sidebar aktivierst, erscheint bei dir trotzdem eine leere Sidebar?
Das ist bei mir definitiv nicht so!

Wenn du mit „Button” die Checkbox in den Einstellungen meinst, weil diese genau so beschriftet ist: Diese aktiviert lediglich sidebar.revamp. Du kannst diese Leiste dennoch ausblenden, sei es über das Kontextmenü, den Sidebar-Button oder per Tastatur. Und dann funktioniert das Script nicht. Aber auch, dass mit deaktivierter Sidebar (zum Beispiel Lesezeichen-Sidebar) einfach nur eine leere Sidebar angezeigt wird, ist ein Fehler des Scripts. Entweder wird eine Sidebar mit Inhalt angezeigt oder nichts, eine komplett leere Sidebar darf es nie geben. Im Übrigen funktioniert mit dem Script auch die Aktivierung respektive Deaktivierung der Sidebar nicht mehr über die Tastatur, was ebenfalls ein Fehler des Scripts ist. Denn ich muss ja weiterhin die Möglichkeit haben, das Einblenden der Sidebar abzuschalten, um diese nicht ständig versehentlich anzuzeigen.

Zitat von Horstmann

Wobei ich glaube dass Sören auch Macs benutzt, evtl. liegt darin die Ursache, wenn das bei dir nicht reproduzierbar ist.

Es ist richtig, dass ich macOS nutze. Aber daran liegt es nicht. Ich habe es gerade in Firefox 146 unter Windows 11 getestet und dort ist es genau das Gleiche.

Horstmann

Im Falle das juras das Thema noch verfolgt:
Sowas mit in den CSS Block zu packen könnte grob helfen mit der leer angezeigten Sidebar, aber eine saubere Lösung ist das nicht.

CSS

#sidebar-box[hidden="true"] {
    display: none !important;
}

hidden dürfte der Status sein, wenn die Sidebar Anzeige ausgeschaltet ist, und scheint vom Script ignoriert/überschrieben zu werden.

Endor

Horstmann

Sidebar Script von Alice siehe hier:

userChrome.js/142/SidebarModoki.uc.js at master · alice0775/userChrome.js

Contribute to alice0775/userChrome.js development by creating an account on GitHub.

github.com

Das ist die neueste Version.

Das Script aus #11
funktioniert hier einwandfrei.
juras
Vielen Dank dafür.

Mfg.
Endor

juras

Hallo

Habe etwas an dem Skript gearbeitet.

Horstmann's Feedback bezüglich der leeren Sidebar konnte ich nachstellen. Die Sidebar wird nun über den Sidebarbutton des FF gesteuert.
Habe zudem noch eine konfigurierbare Öffnungsverzögerung hinzugefügt - war mir zu hektisch am Aufklappen wenn ich die Triggerzone touchiert habe.

JavaScript: Juras-SidebarV1.2.uc.js

//        Author:        Juras & KI
//        Version:    1.2
//        Changelog:    
//                    01.01.2026    Variable zum Verzögern des Aufklappens der Sidebar hinzugefügt
//                                Sidebar wird nur dargestellt wenn im FF eingeschaltet
//                    22.12.2025    Sensorbereich auf den Content-Bereich begrenzt (beginnt unterhalb der Toolbox (Symbolleisten/Tabs))
//                    21.12.2025    Sidebar wird per mouse hover im sensorbereich am Rand getriggert (einstellbar)
//                                Umschaltbar für links und rechts
//                                Bleibt offen bei Auswahl im Sidebar Menü
//                                Sidebar Breite via Maus einstellbar (initiale Breite konfigurierbar)
//                                Sidebar Hintergrundfarbe stellt sich automatisch in Abhängigkeit von Theme (hell/dunkel) ein
//                                Transparenz des Sidebar Hintergrundes einstellbar
//
(function() {
   if (window.jsSidebarActive) return;
   window.jsSidebarActive = true;
   // --- KONFIGURATION ---
   const MIN_TRIGGER_WIDTH = 15;    
   const OPEN_DELAY = 1500;          
   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");
   const appContent = document.getElementById("appcontent");
   if (!sidebar || !toolbox || !browser) return;
   let isMenuOpen = false;
   let isMouseInSidebar = false;
   let isResizing = false;
   let cachedTopOffset = 0;
   let openTimer = null;   
   let closeTimer = null;  
   // PRÜFUNG: Ist die Sidebar im Firefox-Menü überhaupt eingeschaltet?
   function isSidebarEnabled() {
       // Prüft, ob die Sidebar nicht durch Firefox versteckt ist (hidden-Attribut)
       return !sidebar.hasAttribute("hidden") && sidebar.getAttribute("closed") !== "true";
   }
   function isSidebarRight() {
       try {
           if (sidebar.getAttribute("positionend") === "true") return true;
           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() {
       // Falls Sidebar deaktiviert, Hover-Effekte entfernen
       if (!isSidebarEnabled()) {
           style.textContent = "";
           sidebar.removeAttribute("visible");
           return;
       }
       const isRight = isSidebarRight();
       const topOffset = toolbox.getBoundingClientRect().height;
       if (topOffset === 0) return;
       cachedTopOffset = topOffset;
       
       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: 16px; height: 100%;
               cursor: ew-resize !important; z-index: 10001; background: transparent;
           }
           #sidebar-box[data-side="left"] #sidebar-resizer-grip { right: -8px; }
           #sidebar-box[data-side="right"] #sidebar-resizer-grip { left: -8px; }
           #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 Seitenwechsel UND Ein/Ausschalten im Menü
   const sidebarObserver = new MutationObserver(() => updateStyles());
   sidebarObserver.observe(sidebar, { attributes: true, attributeFilter: ['positionend', 'hidden', 'closed'] });
   sidebarObserver.observe(browser, { attributes: true, subtree: true, attributeFilter: ['positionend'] });
   
   Services.prefs.addObserver("sidebar.position_start", updateStyles);
   window.addEventListener("resize", updateStyles);
   setTimeout(updateStyles, 200);
   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);
   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 || !isSidebarEnabled()) return;
       
       const isRight = isSidebarRight();
       const inTrigger = (e.clientY >= cachedTopOffset) && 
                         (isRight ? (e.clientX >= window.innerWidth - MIN_TRIGGER_WIDTH) : (e.clientX <= MIN_TRIGGER_WIDTH));
       
       if (inTrigger) {
           if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
           if (sidebar.getAttribute("visible") !== "true" && !openTimer) {
               openTimer = setTimeout(() => {
                   sidebar.setAttribute("visible", "true");
                   openTimer = null;
               }, OPEN_DELAY);
           }
       } else {
           if (openTimer) { clearTimeout(openTimer); openTimer = null; }
       }
   }, { passive: true });
   sidebar.addEventListener("mouseenter", () => {
       if (!isSidebarEnabled()) return;
       isMouseInSidebar = true;
       if (openTimer) { clearTimeout(openTimer); openTimer = null; }
       if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
   });
   sidebar.addEventListener("mouseleave", () => {
       isMouseInSidebar = false;
       if (!isResizing && sidebar.getAttribute("visible") === "true") startCloseTimer();
   });
   const grip = document.createElement("div");
   grip.id = "sidebar-resizer-grip";
   sidebar.appendChild(grip);
   grip.addEventListener("mousedown", (e) => {
       if (!isSidebarEnabled()) return;
       isResizing = true;
       sidebar.setAttribute("resizing", "true");
       sidebar.style.transition = "none";
       const isRight = isSidebarRight();
       const startX = e.clientX;
       const startWidth = currentWidth;
       const doResize = (me) => {
           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 (!isSidebarEnabled() || sidebar.getAttribute("visible") !== "true" || isMenuOpen || isResizing) return;
       if (appContent && appContent.contains(e.target)) {
           sidebar.setAttribute("visible", "false");
       }
   }, true);
})();

Alles anzeigen

Gruß
Juras

Sidebar für FF 146 - Erster Versuch

Ähnliche Themen

Eigene Zusatzleisten

Sidebar nach Update auf 146 plötzlich Blau

Hilfe bei Konfiguration der "userChrome.css"

Mehrzeilige Tableiste für aktuelle Firefox-Versionen