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(#PersonalT… (cytajśo wěcej)
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!