Make "autohide_toolbox.css" more like Windows-Taskbar-Autohide about firefox-csshacks

[MrOtherGuy]

I figure you mean that you would like the animation should be more like a linear transformation while right now the toolbox rotates around the top edge.

Linear transformation is a bit tricky because we would need more accurately know how tall the toolbox happens to be, and that changes based on what toolbars one has enabled as well as font size on your system etc.

With rotate transformation we kinda get all that for free, or at least there aren't too many things that would affect the values we need to use.

So yeah, you can totally do it if you know what transformation values work well for your scenario.

[VVollmilchsau]

After spending a day with it, I completely understand why you use "transform: rotateX".
I always had to choose between "choppy animation" or "non-hoverable area" in windowed Firefox

A "correct" solution I found was to abuse "autohide_bookmarks_toolbar.css" (show only on "#nav-bar:focus-within") to act as an invisible hover area

Like you said, this is more trial and error :P

margin-top: ... !important;

The Code:

"_autohide_toolbox-slide.css" Changed lines: 22,23,29-32,39,40,45,46

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hide the whole toolbar area unless urlbar is focused or cursor is over the toolbar */
/* Dimensions on non-Win10 OS probably needs to be adjusted */

/* Compatibility options for hide_tabs_toolbar.css and tabs_on_bottom.css at the end of this file */

:root{
--uc-autohide-toolbox-delay: 1500ms; /* Wait 0.1s before hiding toolbars */
--uc-toolbox-rotation: 77deg;  /* This may need to be lower on mac - like 75 or so */
}

:root[sizemode="maximized"]{
--uc-toolbox-rotation: 88.5deg;
}

@media  (-moz-platform: windows){
#navigator-toolbox:not(:-moz-lwtheme){ background-color: -moz-dialog !important; }
}

/* :root[sizemode="fullscreen"], */
/* #navigator-toolbox[inFullscreen]{ margin-top: 0 !important; } */

#navigator-toolbox{
position: fixed !important;
display: block;
background-color: var(--lwt-accent-color,black) !important;
transition: opacity 100ms linear 500ms, margin-top 500ms ease-in-out 0ms;
margin-top: -80px !important;
opacity: 0;
line-height: 0;
z-index: 1;
pointer-events: none;
}

#navigator-toolbox:hover,
#navigator-toolbox:focus-within{
transition: opacity 100ms linear 0ms, margin-top 500ms ease-in-out 100ms;
margin-top: 0 !important;
opacity: 1;
}
/* This ruleset is separate, because not having :has support breaks other selectors as well */
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox{
transition: opacity 100ms linear 0ms, margin-top 500ms ease-in-out 100ms;
margin-top: 0 !important;
opacity: 1;
}

#navigator-toolbox > *{ line-height: normal; pointer-events: auto }

#navigator-toolbox,
#navigator-toolbox > *{
width: 100vw;
-moz-appearance: none !important;
}

/* These two exist for oneliner compatibility */
#nav-bar{ width: var(--uc-navigationbar-width,100vw) }
#TabsToolbar{ width: calc(100vw - var(--uc-navigationbar-width,0px)) }

/* Don't apply transform before window has been fully created */
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }

:root[customizing] #navigator-toolbox{
position: relative !important;
transform: none !important;
opacity: 1 !important;
}

#navigator-toolbox[inFullscreen] > #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{ display: none }

/* Uncomment this if tabs toolbar is hidden with hide_tabs_toolbar.css */
/*#titlebar{ margin-bottom: -9px }*/

/* Uncomment the following for compatibility with tabs_on_bottom.css - this isn't well tested though */
/*
#navigator-toolbox{ flex-direction: column; display: flex; }
#titlebar{ order: 2 }
*/

AND

"_autohide_bookmarks_toolbar-slide.css" Changed lines: 19-21,42,49,53

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

#PersonalToolbar{
--uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
--uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
--uc-autohide-toolbar-delay: 1500ms; /* The toolbar is hidden after 0.6s */

/* 0deg = "show" ; 90deg = "hide" ;  Set the following to control when bookmarks are shown */
--uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
--uc-autohide-toolbar-hover-rotation: 90deg; /* cursor is over the toolbar area */
}

:root[uidensity="touch"] #PersonalToolbar{ --uc-bm-padding: 7px }

#PersonalToolbar:not([customizing]){
position: relative;
margin-bottom: calc(-1px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
opacity: 0;
transition: opacity 250ms linear 100ms !important;
z-index: 1;
/* The following properties should allow the themes with trasparent toolbars to work */
background-color: transparent !important;
background-repeat: no-repeat,no-repeat,var(--lwt-background-tiling);
  /* y position will be wrong if menubar is enabled... */
--uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 24px - var(--bookmark-block-padding));
background-position: top left,top left,var(--lwt-background-alignment,top left);
background-position-y:top,top,var(--uc-bg-y),var(--uc-bg-y),var(--uc-bg-y);
background-image: var(--toolbar-bgimage,linear-gradient(transparent,transparent)), linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image,var(--lwt-additional-images)) !important;
}
:root[uidensity="compact"] #PersonalToolbar{
--toolbarbutton-outer-padding: 1px !important;
}
#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
padding-block: var(--uc-bm-padding) !important;
}

#nav-bar:focus-within + #PersonalToolbar{
transition-delay: 100ms !important;
opacity: 1;
}
#navigator-toolbox:is(:hover,:focus-within){
border-bottom-color: transparent !important;
}
#navigator-toolbox:hover > #PersonalToolbar{
transition-delay: 100ms !important;
opacity: 0;
}

#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {  
opacity: 1;
}

/* Uncomment to enable compatibility for multi-row_bookmarks.css */
/* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup  */
/*
#PersonalToolbar:not([customizing]){
min-height: 0 !important;
margin-bottom: 0;
height: 0;
overflow-y: visible !important;
z-index: 2;
padding-inline: 0 !important;
}
#personal-bookmarks{
background: inherit;
height: min-content;
}
#PlacesToolbarDropIndicatorHolder{
pointer-events: none !important;
}
*/

---

Edit:
Small follow-up question
I use "autohide_sidebar.css" with "--uc-sidebar-width: 1px;"
Is it possible to add an invisible area to trigger hover in windowed mode? Currently I can only activate it in maximized and full screen mode
[opacity + "--uc-sidebar-width: 30px;" doesn't work]

[MrOtherGuy]

Is it possible to add an invisible area to trigger hover in windowed mode?

Maybe, I'm not sure. Currently there isn't really an invisible triggerbox even on fullscreen mode, instead the sidebar just reserves 1px thin slice of the window (and 30px in windowed mode).

Having it be invisible triggerbox while not reserving any space is really a usability problem because it would make the edge of the website unusable or potentially very annoying to use because sidebar would popup unexpectedly.

[VVollmilchsau]

In fullscreen mode and maximized it's not really necessary (preferably excluded with :root[sizemode="normal"])
I understand your concerns about usability, but Sidebery is on the left and 30 pixels was more of an example (actually more like 5-15 pixels? I have no idea).
Could you please share some insights with me since I have no idea what kind of code realizes this?

[MrOtherGuy]

You can add this to autohide-sidebar.css to make the sidebar show on top of web-content:

#sidebar-box{
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
}
#sidebar-box:not(:hover){
  opacity: 0;
  transition: opacity var(--uc-autohide-transition-duration) linear var(--uc-autohide-sidebar-delay);
}

I suppose it should be pretty easy to add this as option in case someone wants to use it like that.

[VVollmilchsau]

TY, one step closer, but everything I tried today ends with this color (#23222b on the left) and I don't know which element defines it :P
https://i.imgur.com/ttpix0F.png

[MrOtherGuy]

That rather sounds like you might be using letterboxing through privacy.resistFingerprinting.letterboxing

If you are doing that, then the empty area should be expected and the color you see is the background-color of #tabbrowser-tabpanels

[VVollmilchsau]

Hmm, RFP "privacy.resistFingerprinting" is false and "privacy.resistFingerprinting.letterboxing" does not exist in about:config
I only use FPP "privacy.fingerprintingProtection" through ETP-Strict

Also the same behavior with:

#tabbrowser-tabpanels{
  background-color: transparent !important;
}

[MrOtherGuy]

So not about letterboxing then. Sadly in that case I have no idea what that space in your screenshot is about.

[VVollmilchsau]

Update:
I disabled everything in "userChrome.css" and added your snippet to a clean "autohide_sidebar.css".
And it works =)
Time for me to figure out what the problem is^^

---

Edit:
I forgot one of these...

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]

[VVollmilchsau]

So I'm finally happy with my solution :)
https://i.imgur.com/uGJN1aB.gif
Keep in mind, its captured in windowed and a lot easier to trigger maximized/fullscreen

Many thanks for your help! =)

The Code:

"_autohide_sidebar-step.css" Changed lines: 7-26,35,36,38,53,54,59,60,62

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]{
--uc-sidebar-width: 16px;
--uc-sidebar-hover-width: 375px;
--uc-autohide-sidebar-delay: 500ms; /* Wait 0.5s before show and hide sidebar */
--uc-autohide-sidebar-hover-delay: 1500ms; /* Wait 1.5s before extend sidebar */
--uc-autohide-transition-duration: 250ms;
--uc-autohide-transition-type: linear;
position: relative;
min-width: 0 !important;
width: 0 !important;
max-width: 0 !important;
opacity: 0;
transition: opacity var(--uc-autohide-transition-duration) linear calc(var(--uc-autohide-transition-duration) + var(--uc-autohide-sidebar-delay));
z-index:1;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover{
opacity: 1;
transition: opacity var(--uc-autohide-transition-duration) linear var(--uc-autohide-sidebar-delay);
}

#sidebar-box[positionend]{ direction: rtl }
#sidebar-box[positionend] > *{ direction: ltr }

#sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr }
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl }

#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; }
/* #main-window[sizemode="maximized"] #sidebar-box{ --uc-sidebar-width: 1px; } */
/* #main-window[sizemode="normal"] #sidebar-box{ --uc-sidebar-width: 1px; } */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-splitter{ display: none }

#sidebar-header{
overflow: hidden;
color: var(--chrome-color, inherit) !important;
padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after{
content: "";
display: flex;
padding-left: 8px;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-header,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar{
transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
min-width: var(--uc-sidebar-width) !important;
will-change: min-width;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar-header,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar{
min-width: var(--uc-sidebar-hover-width) !important;
transition-delay: var(--uc-autohide-sidebar-hover-delay) !important;
}

.sidebar-panel{
background-color: transparent !important;
color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
-moz-appearance: none !important;
background-color: rgba(249,249,250,0.1) !important; 
color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
background-color: inherit !important;
border-inline: 1px solid rgb(80,80,80);
border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{
border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
margin-inline: 0px !important;
border-left-style: solid !important; 
}