autohiding toolbars: apply urlbar popover fixes to new searchbar

Some of the rules are unnecessarily complex, but we need to support
old searchbar as well
This commit is contained in:
MrOtherGuy
2026-03-24 17:22:05 +02:00
parent a0b34290bb
commit d7b50d6c97
3 changed files with 22 additions and 12 deletions

View File

@@ -73,16 +73,17 @@ See the above repository for updates as well as full license text. */
transform-origin: 0px var(--uc-navbar-height);
position: relative;
}
:root[sessionrestored] #urlbar[popover]{
:root[sessionrestored] :is(.urlbar,#urlbar[popover]){
opacity: 0;
pointer-events: none;
transition: transform 135ms linear var(--uc-autohide-toolbar-delay), opacity 0ms calc(var(--uc-autohide-toolbar-delay) + 135ms);
transform-origin: 0px calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2);
transform: rotateX(89.5deg);
}
:root[window-modal-open] #urlbar[popover],
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
:root:is([window-modal-open],[customizing]) toolbar :is(.urlbar,#urlbar[popover]),
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox :is(.urlbar,#urlbar[popover]),
#navigator-toolbox:is(:hover,:focus-within) :is(.urlbar,#urlbar[popover]),
:where(:root[sessionrestored]) #nav-bar #searchbar-new[popover]:is([focused],[open]),
:where(:root[sessionrestored]) #urlbar-container > #urlbar[popover]:is([focused],[open]){
opacity: 1;
pointer-events: auto;

View File

@@ -54,21 +54,25 @@ See the above repository for updates as well as full license text. */
transition-duration: var(--uc-autohide-toolbar-duration), var(--uc-autohide-toolbar-duration) !important;
transition-delay: 0s !important;
}
:root[sessionrestored] #urlbar[popover]{
:root[sessionrestored] :is(.urlbar,#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],
:root[customizing] #nav-bar :is(#urlbar,#searchbar-new),
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox :is(.urlbar,#urlbar[popover]),
.browser-titlebar:is(:hover,:focus-within) ~ #nav-bar :is(.urlbar,#urlbar[popover]),
#nav-bar:is(:hover,:focus-within) :is(.urlbar,#urlbar[popover]),
#nav-bar #searchbar-new[popover]:is([focused],[open]),
#urlbar-container > #urlbar[popover]:is([focused],[open]){
opacity: 1;
pointer-events: auto;
transition-delay: 0ms;
transform: translateY(0);
}
:where(:root[sessionrestored]) #nav-bar #searchbar-new[popover]:is([focused],[open]),
:where(:root[sessionrestored]) #urlbar-container > #urlbar[popover]:is([focused],[open]){
transition-duration: 100ms; /* Faster when focused */
}

View File

@@ -35,6 +35,7 @@ See the above repository for updates as well as full license text. */
pointer-events: none;
width: 100vw;
}
:root[sessionrestored] toolbar #searchbar-new[popover],
:root[sessionrestored] #urlbar[popover]{
pointer-events: none;
opacity: 0;
@@ -43,9 +44,11 @@ See the above repository for updates as well as full license text. */
transform: rotateX(89.9deg);
}
:root[window-modal-open] #urlbar[popover],
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel), > #tab-group-editor > [panelopen]) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within,[movingtab]) #urlbar[popover],
:root:is([window-modal-open],[customizing]) toolbar #searchbar-new[popover],
:root:is([window-modal-open],[customizing]) #urlbar[popover],
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel), > #tab-group-editor > [panelopen]) ~ toolbox :is(.urlbar,#urlbar[popover]),
#navigator-toolbox:is(:hover,:focus-within,[movingtab]) :is(.urlbar,#urlbar[popover]),
:where(:root[sessionrestored]) #navigator-toolbox .urlbar[popover]:is([focused],[open]),
:where(:root[sessionrestored]) #urlbar-container > #urlbar[popover]:is([focused],[open]){
pointer-events: auto;
opacity: 1;
@@ -56,6 +59,7 @@ See the above repository for updates as well as full license text. */
:root[window-modal-open] #navigator-toolbox,
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel), > #tab-group-editor > [panelopen]) ~ toolbox,
#navigator-toolbox:has(#urlbar:is([open],[focus-within])),
#navigator-toolbox:has(.urlbar:is([open],[focus-within])),
#navigator-toolbox:is(:hover,:focus-within,[movingtab]){
transition-delay: 33ms !important;
transform: rotateX(0);
@@ -67,6 +71,7 @@ See the above repository for updates as well as full license text. */
@media -moz-pref("userchrome.autohide-toolbox.unhide-by-native-ui.enabled"){
:root[sizemode="maximized"]:not(:hover){
#navigator-toolbox:not(:-moz-window-inactive),
#searchbar-new[popover]:not(:-moz-window-inactive),
#urlbar[popover]:not(:-moz-window-inactive){
transition-delay: 33ms !important;
transform: rotateX(0);
@@ -90,7 +95,7 @@ See the above repository for updates as well as full license text. */
#PersonalToolbar:is([collapsed=""],[collapsed="true"]){ display: none }
/* This is a bit hacky fix for an issue that will make urlbar zero pixels tall after you enter customize mode */
#urlbar[breakout][breakout-extend] > .urlbar-input-container{
:is(#urlbar,.urlbar)[breakout][breakout-extend] > .urlbar-input-container{
padding-block: calc(min(4px,(var(--urlbar-container-height) - var(--urlbar-height)) / 2) + var(--urlbar-container-padding)) !important;
}