Yeah, !important
doesn’t affect inheritance in any way. It only means that this particular rule is to be used if there are multiple rules that would set that particular property for the element in question (unless there’s some other more specific rule with !important tag as well). MDN lists property inheritance in the formal definition section. You can totally make background-color inherited though - like *{ background-color: inherit }
(and then set the property to something else on the root element from which you would want to inherit from) but it would then either not apply if website set it to anything else for an element or override any other set value if you used !important
tag.
One other thing worth noting is that I would not recommend the rules mentioned for userChrome.css to be used as is - at least on Windows they completely break Firefox startup - it fails to display any window if you do that. Instead you should add a [
selector to wait a bit before those rules are applied to main-window: ]
#main-window[sessionrestored], #tabbrowser-tabpanels{ background: transparent !important; }
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 inchrome/
folder etc.). The toolbox profile is stored inside the regular profile - in a directorychrome_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; }