Falls das mal jemand testen möchte; das wäre nur als grober Test gedacht für das Prinzip.
Die Idee wäre, dass das Script möglichst wenig an Fx Code und nativer Funktion überschreibt; die Aktivierungsfläche ist für eben den Test sichtbar und recht gross, und agiert auch als Resizer.
Kann verschoben und verkleinert werden.
Ein Teil vom JS Code ist teils vom OP übernommen, teils mit freundlicher Hilfe von Perplexity AI entstanden, aber generell manuell angepasst. CSS ist 100% by Horst-I. 
JavaScript
// floating_autohide_sidebar_test4.uc.js
// floating autohide hover sidebar Test 4
// Hover/resizer handle options for position and width
// Additional hover area in toolbar option
// User settings at the start of JS and CSS code blocks
(function() {
if (location.href !== 'chrome://browser/content/browser.xhtml')
return;
// User settings JS
// true = enabled, false = disabled
// Additional hover area in toolbar
let hover_button = true;
// Hover/resizer handle narrow and full height
let full_height = false;
// Test colors
let test_colors = false;
// User settings JS end
// 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');
//document.getElementById('sidebar-box').style.setProperty('--height_sidebar_top', rect.top + '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");
}
});
// Hover button
if (hover_button) {
try {
CustomizableUI.createWidget({
id: 'sb_hover_button',
defaultArea: CustomizableUI.AREA_NAVBAR,
label: 'Sidebar Hover',
tooltiptext: 'Sidebar Hover',
});
} catch (e) {}
let hover_btn = document.getElementById("sb_hover_button");
hover_btn.addEventListener('mouseover',function(){
floater.classList.add("hover_that");
})
hover_btn.addEventListener('mouseleave',function(){
floater.classList.remove("hover_that");
});
// prevent click
hover_btn.onmousedown = function(event) {
event.preventDefault();
}
};
// 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");
floater.classList.add("resizinger");
let rect_r = resizer.getBoundingClientRect();
offsetX = rect_r.width / 2;
offsetY = rect_r.height / 2;
floater.style.transition = "none";
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";
//floater.style.setProperty('--end_width_sidebar', newWidth + 'px');
});
window.addEventListener("mouseup", () => {
isResizing = false;
floater.classList.remove("resizinger");
});
let css =`
#sidebar-box {
/*-- User settings CSS --*/
--ug-handle_height: 64px;
--ug-handle_width: 32px;
--ug-handle_distance_top: 0px;
--ug-handle_width_fullheight: 16px;
--ug-trans_duration: 0.25s;
--ug-trans_delay_out: 0.275s;
--ug-trans_delay_in: 1s;
/*-- User settings CSS end --*/
--ug-handle_position: calc(-1*var(--ug-handle_width) + 5px);
--ug-handle_width_resize: calc(100% + var(--ug-handle_width));
position: fixed !important;
/*max-width: unset !important;*/
left: 0px;
right: unset;
bottom: 0px;
height: var(--height_sidebar);
z-index: 99999 !important;
transform: translateX(-100%);
transition: transform var(--ug-trans_duration) ease !important;
transition-delay: var(--ug-trans_delay_in) !important;
}
#sidebar-box:is([positionend],[sidebar-positionend]) {
transform: translateX(100%);
left: unset;
right: 0px;
}
/* show */
#sidebar-box:is(:hover, .menu_up, .hover_that):not(:-moz-window-inactive) {
transform: translateX(0%);
transition-delay: var(--ug-trans_delay_out) !important;
}
/* Resizer */
#sidebar_resizer {
position: absolute;
top: var(--ug-handle_distance_top);
left: unset;
right: var(--ug-handle_position);
width: var(--ug-handle_width);
height: var(--ug-handle_height);
cursor: ew-resize;
}
#sidebar-box:is([positionend],[sidebar-positionend]) #sidebar_resizer {
left: var(--ug-handle_position);
right: unset;
}
#sidebar-box.resizinger #sidebar_resizer {
width: var(--ug-handle_width_resize);
}
#sidebar_resizer::after {
content: "";
position: absolute;
right: 0px;
z-index: -1 !important;
width: var(--ug-handle_width_resize);
height: 100%;
background-color: transparent;
outline: 1px solid transparent;
outline-offset: -1px;
box-shadow: none;
transition: background-color var(--ug-trans_duration) ease,
outline var(--ug-trans_duration) ease,
box-shadow var(--ug-trans_duration) ease !important;
transition-delay: var(--ug-trans_delay_in) !important;
}
#sidebar-box:is([positionend],[sidebar-positionend]) #sidebar_resizer::after {
left: 0px;
}
#sidebar-box:is(:hover, .menu_up, .hover_that):not(:-moz-window-inactive) #sidebar_resizer::after {
background-color: var(--sidebar-background-color);
outline-color: var(--sidebar-border-color);
transition-delay: var(--ug-trans_delay_out) !important;
}
#sidebar-box.resizinger #sidebar_resizer::after {
background-color: color-mix(in srgb, currentColor 10%, var(--sidebar-background-color)) !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
/* Hover buton */
#sb_hover_button > .toolbarbutton-icon {
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
width: 64px !important;
background-image: url(chrome://global/skin/icons/arrow-right.svg), url(chrome://global/skin/icons/arrow-left.svg) !important;
background-position: center left 20%, center right 20% !important;
background-size: 50% 50% !important;
background-repeat: no-repeat !important;
}
#sb_hover_button {
padding: 0px 2px !important;
}
/* colors, border */
#sidebar,
#sidebar-header {
background-color: var(--sidebar-background-color) !important;
border-inline: 1px solid var(--sidebar-border-color);
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;
}
`;
if (full_height) {
css += `
/* full height */
#sidebar-box {
--ug-handle_height: 100%;
--ug-handle_distance_top: 0px;
--ug-handle_width: var(--ug-handle_width_fullheight);
}
#sidebar-box:is(:hover, .menu_up, .hover_that):not(:-moz-window-inactive) #sidebar_resizer::after {
outline-color: transparent !important;
box-shadow: inset -1px 0px var(--sidebar-border-color),
inset 1px 0px var(--sidebar-border-color);
}
`;
}
if (test_colors) {
css += `
/* Test colors */
#sidebar_resizer {
background: hsla(35, 0%, 50%, 0.25);
outline: 1px solid red;
outline-offset: -1px;
}
`;
}
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);
})();
