Sidebar als schwebende, hover-aktivierte Leiste

// ==UserScript==
// @name           sidebar_floating_hover.uc.js
// @compatibility  Firefox 155*.*
// @version        05.09.2026

// ==/UserScript==

/* ----------------------------------------------------------------------------------- */
/*  IMPORTANT!         This script was edited and modified using AI.                   */
/* ----------------------------------------------------------------------------------- */

'use strict';

const
  // ■■ START UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  handleSize    = '50px'      ,// Größe des Resizer-Handles
  transDelayOut = '0.25s'     ,// Verzögerung beim Ausblenden
  transDelayIn  = '1s'        ,// Verzögerung beim Einblenden
  resizerTop    = '200px'     ,// Position des Resizer-Handles (top)
  resizerHeight = '70%'       ;// Höhe des Resizer-Handles
  // ■■ END UserConfiguration ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


(function() {

    if (location.href !== 'chrome://browser/content/browser.xhtml')
        return;

    // adjust height to browser window
    let brow_size = document.getElementById("browser");
    let observer = new ResizeObserver(() => {
    let rect = brow_size.getBoundingClientRect();
    document.getElementById('sidebar-box').style.setProperty('--height_sidebar', rect.height + 'px');
    });
    observer.observe(brow_size);

    let floater = document.getElementById('sidebar-box');

    // keep sidebar open when open popup is hovered
    window.addEventListener("popupshowing", (e) => {
        if (e.target.id === "sidebarMenu-popup" || e.target.getAttribute("viewid")?.startsWith("sidebar-")) {
          floater.classList.add("menu_up");
        }
        else {
          floater.classList.remove("menu_up");
        }
    });

    // resizer
    let resizer = document.createElement("div");
    resizer.id = "sidebar_resizer";
    floater.appendChild(resizer);

    let isResizing = false;
    let startX, startWidth;
    let isRight;

    resizer.addEventListener("mousedown", e => {
      isResizing = true;
      startX = e.clientX;
      startWidth = floater.getBoundingClientRect().width;
      isRight = floater.hasAttribute("positionend") || floater.hasAttribute("sidebar-positionend");
      e.preventDefault();
    });

    window.addEventListener("mousemove", e => {
      if (!isResizing) return;

      let delta;
      if (isRight) {
        delta = startX - e.clientX;
      } else {
        delta = e.clientX - startX;
      }

      let newWidth = startWidth + delta;
      floater.style.width = newWidth + "px";
    });

    window.addEventListener("mouseup", () => {
      isResizing = false;
    });

    let css =`

    #sidebar-box {
        --ug-handle_size: ${handleSize};
        --ug-trans_delay_out: ${transDelayOut};
        --ug-trans_delay_in: ${transDelayIn};
        position: fixed !important;
        /*max-width: unset !important;*/
        right: 0px;
        left: unset;
        bottom: 0px;
        height: var(--height_sidebar);
        z-index: 99999 !important;
        transform: translateX(0%);
        transition: transform 1.5s ease !important;
        transition-delay: var(--ug-trans_delay_out) !important;
    }

    #sidebar-box:not([positionend],[sidebar-positionend]) {
        right: unset;
        left: 0px;
    }

    /*  Resizer  */

    #sidebar_resizer {
        position: absolute;
        top: ${resizerTop};
        right: unset;
        left: calc(-1*var(--ug-handle_size));
        width: var(--ug-handle_size);
        height: ${resizerHeight};
        cursor: ew-resize;
      /*  background: hsla(35, 0%, 50%, 0.25); */
        outline: 2px solid hsla(35, 0%, 50%, 0.25);
      /*  outline: 2px solid lightblue; */
        outline-offset: -2px;
    }

    #sidebar-box:not([positionend],[sidebar-positionend])  #sidebar_resizer {
        right: calc(-1*var(--ug-handle_size));
        left: unset;
    }

    /*   hide   */

    #sidebar-box:not(:hover, .menu_up) {
        transform: translateX(100%);
        transition-delay: var(--ug-trans_delay_in) !important;
    }

    #sidebar-box:not([positionend],[sidebar-positionend]):not(:hover, .menu_up) {
        transform: translateX(-100%);
    }

    /*   stuff   */
    /*
    #sidebar,
    #sidebar-header {
      background-color: whitesmoke !important;
      border-inline: 1px solid grey;
      border-inline-width: 1px 0px;
    }

    #sidebar-box:not([positionend],[sidebar-positionend]) :is(#sidebar, #sidebar-header) {
      border-inline-width: 0px 1px;
    }
    */
    #sidebar-splitter {
        display: none !important;
    }

    `;

  const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
  const uri = Services.io.newURI('data:text/css,' + encodeURIComponent(css));
  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();