A community for discussion about Mozilla Firefox.
Don't think, it's possible without applying a patch to the Firefox code.
As far as I can tell, this is the code to render that toolbar: https://searchfox.org/mozilla-central/rev/16652bab8dbb820ce1079263e5a1373de303e656/devtools/client/framework/components/ChromeDebugToolbar.js#99-121
And it's got two class names in there, but applying display: none !important; to them in userChrome.css doesn't do anything...
You can hide them with userContent.css - most of the devtools window stuff is styled via userContent.css not userChrome.css.
But there's a catch.
Browser toolbox is essentially a separate instance of Firefox, running in separate profile so your "normal" user css files don't apply to it. Thus, you need to first enable the toolbox profile to load it's own user css files and create them just like you do normally (toggle toolkit.legacyUserProfileCustomizations.stylesheets, create files in chrome/ folder etc.). The toolbox profile is stored inside the regular profile - in a directory chrome_debugger_profile.
To get to about:config of the toolbox profile you need to first open a new main-window for it - one way that works is to click the meatball menu at the top-right of the toolbox window, and select "Documentation..." - that will launch a new window using using the toolbox profile and then you can just open about:config and proceed as usual. Or you can just modify prefs.js of the toolbox profile directly while the toolbox is not running.
Anyway, after you have set up the toolbox window to load user css files, then just slap this to its userContent.css and restart the toolbox:
header.chrome-debug-toolbar{
display: none !important;
}