MrOtherGuy / firefox-csshacks

Collection of userstyles affecting the browser
Mozilla Public License 2.0
3.48k stars 328 forks source link

autohide, urlbar & searchbar misplaced in vertical tab mode #442

Open antiquealive opened 3 weeks ago

antiquealive commented 3 weeks ago
Capture

I tried to add or minus some px in urlbar placement, but when focusing on url bar, the typing area got moved above the screen.

It might not be a good timing to fix this? Recently, Firefox seems constantly modifying its vertical tab bar feature each new version.

Setup: autohide_main_toolbar.css user_pref("sidebar.revamp", true); user_pref("sidebar.verticalTabs", true);

Thanks for continuous efforts to update the autohide feature.

paolocalosso commented 3 weeks ago

same here

MrOtherGuy commented 3 weeks ago

Sure, the wrong positioning was caused by some stupid hack I had to add because otherwise urlbar would have been completely wrongly aligned in Firefox 133. That seems to not be required anymore - at least I could not reproduce it anymore with 133.0b4 so I've removed that hack.

I've also made the main toolbar inherit its background from the toolbox because otherwise it could have transparent background when vertical tabs were enabled. There's still another pretty bad issue with autohide_main_toolbar.css in that you cannot hover the toolbars when sidebar tabs are used, menubar is disabled and when window is not maximized because there's nothing to hover. Would need to add some invisible area there of substantial height because once cursor gets near the top of the window then OS jumps in and goes to show window resize cursor.

antiquealive commented 3 weeks ago

There's still another pretty bad issue with autohide_main_toolbar.css in that you cannot hover the toolbars when sidebar tabs are used, ... not maximized ...

Not an issue, at least for me. I use Ctrl+L to display the urlbar in windowed / non-maximized mode. I then use drag space on the navbar to move window around if needed; or Win + Arrow key to move the window.

Two hands are more efficient than one.

The Zen browser makes it possible to click tabbar empty space to drag the window in sidebar mode, which is another idea to do this. No need to complicate current autohide css, it is good enough imo. tks!

antiquealive commented 3 weeks ago

ChatGPT just offered this, it seems working pretty well. Not a coder myself, but it just works.

This AI thing is just amazing!

By ChatGPT: Add conditional padding on hover: This might help in both windowed and maximized modes while ensuring the navbar can "show up" on hover.

#nav-bar {
    position: relative; /* Ensure the navbar can be shifted */
    transform: translateY(3px); /* Shifts the navbar down by 3px */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

#nav-bar:hover {
    transform: translateY(0); /* Moves the navbar back to its original position on hover */
}
MrOtherGuy commented 3 weeks ago

While we might need to do something like that, it isn't really a good solution - at least not in a simple form like that. For one, it makes some parts inaccessible, such as top-most tab when using vertical tabs since now the toolbar will just cover it whenever you try to click it. Similarly, that also makes top 40 or so pixels of web-pages unclickable which is a total no-no. Also, interacting with bookmarks toolbar is not good because hovering it shouldn't trigger nav-bar to show up (I'm unsure as to why, but that has always been the behavior of that style and it seems rather deliberate).

soul4feels commented 1 day ago

While we might need to do something like that, it isn't really a good solution - at least not in a simple form like that. For one, it makes some parts inaccessible, such as top-most tab when using vertical tabs since now the toolbar will just cover it whenever you try to click it. Similarly, that also makes top 40 or so pixels of web-pages unclickable which is a total no-no. Also, interacting with bookmarks toolbar is not good because hovering it shouldn't trigger nav-bar to show up (I'm unsure as to why, but that has always been the behavior of that style and it seems rather deliberate).

change "transform: translateY(3px); " to -32px.