From 73aab2452e59eaf835cdf22001e9088a96af442d Mon Sep 17 00:00:00 2001
From: kenji <kenji@hakase>
Date: Mon, 5 Jan 2026 15:03:00 -0600
Subject: [PATCH] style(firefox): finalize autohide toolbox for web-app profile

Successfully autohides both Tabs and Nav-bar using MrOtherGuy's strategy with a fixed trigger zone.
---
 apps/firefox/profiles/web-app.nix | 116 +++++++++++++++++++++---------
 1 file changed, 83 insertions(+), 33 deletions(-)

diff --git a/apps/firefox/profiles/web-app.nix b/apps/firefox/profiles/web-app.nix
index 29b6c96..7f32edb 100644
--- a/apps/firefox/profiles/web-app.nix
+++ b/apps/firefox/profiles/web-app.nix
@@ -70,54 +70,104 @@
   };
 
   userChrome = ''
-    /* --- Floating Autohide Toolbox (Tabs + Address Bar) --- */
+    /* --- Autohide Entire Toolbox (Tabs + Address Bar) --- */
+    /* Adapted from MrOtherGuy's autohide_main_toolbar.css */
 
-    :root {
-      --toolbox-transition-duration: 0.2s;
-      --toolbox-transition-timing-function: ease;
+    :root{
+      /* Height of Tabs + Nav Bar approx 80px */
+      --uc-navbar-transform: -85px; 
+      --uc-autohide-toolbar-delay: 0.1s;
+      --uc-autohide-toolbar-duration: 200ms;
     }
+    :root[uidensity="compact"]{ --uc-navbar-transform: -70px }
 
-    #navigator-toolbox {
-      position: fixed !important;
-      top: 0;
-      left: 0;
-      width: 100%;
-      z-index: 9999 !important;
-      transition: transform var(--toolbox-transition-duration) var(--toolbox-transition-timing-function) !important;
-      transform: translateY(-100%) !important;
-      opacity: 0 !important;
+    #navigator-toolbox > div{ display: contents; }
+    
+    /* Apply transform to TabsToolbar AND Nav-bar */
+    :root[sessionrestored] :where(#nav-bar,#PersonalToolbar,#TabsToolbar,#tab-notification-deck,.global-notificationbox,#notifications-toolbar){
+      transform: translateY(var(--uc-navbar-transform))
     }
-
-    /* Reveal on hover */
-    #navigator-toolbox:hover,
-    #navigator-toolbox:focus-within {
-      transform: translateY(0) !important;
+    
+    :root:is([customizing],[chromehidden*="toolbar"]) :where(#nav-bar,#PersonalToolbar,#TabsToolbar,#tab-notification-deck,.global-notificationbox,#notifications-toolbar){
+      transform: none !important;
       opacity: 1 !important;
     }
 
-    /* Trigger zone at top of screen */
+    /* Hide styles for Nav-Bar AND TabsToolbar */
+    :where(#nav-bar,#TabsToolbar):not([customizing]){
+      opacity: 0;
+      transition:  transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay) !important;
+      position: relative;
+      z-index: 2;
+    }
+
+    #navigator-toolbox,
+    #sidebar-box,
+    #sidebar-main,
+    #sidebar-splitter,
+    #tabbrowser-tabbox{
+      z-index: auto !important;
+    }
+
+    /* Show when toolbox is focused or hovered */
+    #navigator-toolbox:focus-within > .browser-toolbar,
+    .browser-titlebar:hover ~ :is(#nav-bar,#PersonalToolbar,#TabsToolbar),
+    #nav-bar:hover,
+    #TabsToolbar:hover,
+    #nav-bar:hover + #PersonalToolbar{
+      transform: translateY(0);
+      opacity: 1;
+      transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
+      transition-delay: 0s !important;
+    }
+
+    /* Ensure popups still work (URL bar) */
+    :root[sessionrestored] #urlbar[popover]{
+      opacity: 0;
+      pointer-events: none;
+      transition: transform var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay), opacity var(--uc-autohide-toolbar-duration) ease var(--uc-autohide-toolbar-delay);
+      transform: translateY(var(--uc-navbar-transform));
+    }
+    #mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
+    .browser-titlebar:is(:hover,:focus-within) ~ #nav-bar #urlbar[popover],
+    #nav-bar:is(:hover,:focus-within) #urlbar[popover],
+    #urlbar-container > #urlbar[popover]:is([focused],[open]){
+      opacity: 1;
+      pointer-events: auto;
+      transition-delay: 0ms;
+      transform: translateY(0);
+    }
+    :where(:root[sessionrestored]) #urlbar-container > #urlbar[popover]:is([focused],[open]){
+     transition-duration: 100ms;
+    }
+
+    /* --- CRITICAL FIX: Trigger Zone --- */
+    /* Since we hide EVERYTHING, we need a hitbox at the top of the screen */
     #navigator-toolbox::after {
       content: "";
-      position: absolute;
-      top: 100%; /* Below the hidden toolbox */
+      position: fixed;
+      top: 0;
       left: 0;
       width: 100%;
-      height: 5px; /* Size of the trigger area */
-      z-index: 10000 !important;
+      height: 20px; /* Generous hit target */
+      z-index: 10000;
+      pointer-events: auto;
+    }
+    
+    /* When hitbox is hovered, reveal bars */
+    #navigator-toolbox:hover :where(#nav-bar,#PersonalToolbar,#TabsToolbar) {
+      transform: translateY(0) !important;
+      opacity: 1 !important;
+      transition-delay: 0s !important;
     }
 
-    /* Remove native titlebar so it doesn't mess up height */
-    #titlebar {
-      appearance: none !important;
-      margin-bottom: -10px !important; /* Pull things up if needed */
+    /* Move up the content view to fill the gap */
+    :root[sessionrestored]:not([chromehidden~="toolbar"]) > body > #browser{
+      margin-top: var(--uc-navbar-transform);
     }
 
-    /* Ensure content starts at top of screen */
-    #browser, #appcontent, tabbrowser, #tab-notification-deck {
-      margin-top: 0 !important;
-    }
-
-    /* Hide Bookmarks Toolbar permanently */
+    /* Fix Titlebar and Bookmarks */
+    #titlebar { appearance: none !important; }
     #PersonalToolbar { visibility: collapse !important; }
   '';
 }