Toggling visibility of the URL bar and tabs via the bookmarks toolbar visibility setting [SOLVED]
tl:dr Here's the CSS to put in userChrome.css file. This is the "hides everything" option. See toward the end of this post for others.
- navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) {
visibility: collapse;
}
+++
I was looking for a way to hide the nav bar and ran across this older forum topic (https://support.mozilla.org/en-US/questions/1288181).
The solution shown here seems to be non-functional these days (early 2024), but it gets us in the right direction, so below is the code for us to look at.
- main-window[chromehidden*="toolbar"] #nav-bar {
visibility: collapse;
}
This is CSS, meant to be copied into a text document, itself placed in a folder called "chrome" that you'll need to create in your browser's active profile folder. Per step 6 in the instructions (https://www.userchrome.org/how-create-userchrome-css.html) linked by @jscher2000 in the above-linked forum topic, you'll also need to set toolkit.legacyUserProfileCustomizations.stylesheets to "true" in about:config. If you don't know what about:config is, this is a good example to get started, but I'm not going to explain it here.
This CSS code selects the object with ID #main-window, with an HTML attribute "chromehidden" equal to "toolbar", and sets its CSS property "visibility" to "collapse". Apparently Mozila have changed the way they implement toolbar hiding, as this no longer works — this chromehidden attribute is nowhere to be found in the HTML that drives the Firefox interface, not sure if that's the place to look for it, but I think so. Anyway, we need to dig around in this interface HTML ourselves to see what changes when hiding the bookmarks toolbar, so we can adapt a new method to what's going on in the browser now.
To do so, we open a window within a window (chrome://browser/content/browser.xhtml) and run the inspector via Web Developer Tools. Comparing the HTML we see here with the bookmarks toolbar in each state (I used BBEdit to compare the texts), we see that the object with ID #PersonalToolbar experiences a change in its "collapsed" attribute when we hide/show the bookmarks toolbar. So in our CSS code, we shift our strategy to update the "collapse" CSS property for #navigator-toolbox whenever it contains a #PersonalToolbar object with its own "collapsed" attribute set to "true", which occurs whenever we hide the bookmarks toolbar. Somewhat surprisingly, this approach of updating the CSS property seems to auto-reset on its own when the "collapsed" attribute is set back to "false", which occurs when we show the bookmarks toolbar again. In other words, it simply toggles with the visibility setting of the bookmarks toolbar, and we don't have to write any further code.
If you're interested in hiding some other UI element when hiding the bookmarks toolbar, you can modify this code to do stuff like that (but to go beyond the below examples you'll need to suss out the object IDs, CSS properties, and HTML attributes — and maybe more, depending on what you're trying to do — on your own).
But for convenience, here's an example that hides just the tabs:
- navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) #titlebar {
visibility: collapse;
}
Here's one that hides just the URL bar:
- navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) #nav-bar {
visibility: collapse;
}
Since those are the only other two things in the #navigator-toolbox to be hidden, I suppose that means we now have all options on the table (at least the way I have the browser set up). Enjoy!
All Replies (3)
Omg, this system for text input here in the forum is horrible — it changed all the # signs at the start of lines in my original text to "1.", as if the # means "list." And it won't let me update the text… nice 🙄
Let's see if I can trick it into providing a better version. This is the correct code in the tl:dr text in my original post:
#navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) {
visibility: collapse;
}
Modified by firefox.anon8f8
Seems to work with a space in front of the hashtag signs. Here are the other two CSS snippets:
Here's the example that hides just the tabs:
#navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) #titlebar {
visibility: collapse;
}
Here's one that hides just the URL bar:
#navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) #nav-bar {
visibility: collapse;
}
I took this a bit further and came up with a solution that only hides the full navigator-toolbox in windows that are in full-screen mode, below.
At first I was satisfied with just tying the vanishing nav bar and tabs directly to the shift-command-B for toggling the bookmarks toolbar on and off, but using it, I wanted to have full screen windows where the UI stuff is hidden, and some where it's not.
Figuring this out required stumbling upon the "sizemode" attribute at :root that apparently gets set to "fullscreen" when a window goes to full screen.
The discussion where I stumbled onto this is here (https://support.mozilla.org/en-US/questions/1410524). I don't seem to be able to find any way to access properties of ":root" in the same manner as I was able to access the HTML for the Firefox UI, so I can't search for more attributes or properties — if you know a way, please comment!
:root[sizemode="fullscreen"] #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) {
visibility: collapse;
}