Firefox

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;
}