Using userChrome.css to Customise Developor Tools

[manngo]

I can only assume that something has changed in recent versions of Firefox. I am currently using Firefox 72.

In the past it was possible to customise parts of the Developer Tools using

Code: Select all

userChrome.css

. This doesn’t appear to work any more. In particular I want to change the font size for my own short-sightedness and to use in the classroom.

I have already enabled

Code: Select all

toolkit.legacyUserProfileCustomizations.stylesheets

and tested it with some other settings, so that’s not the problem. The problem appears to be that the Developer Tools are inside an

Code: Select all

iFrame

and thus are out of reach.

I have tried various combinations of

Code: Select all

@-moz-document url-prefix(chrome://devtools/content/) {…}

and

Code: Select all

@document url-prefix(chrome://devtools/content/) {…}

and that doesn’t seem to work either. Perhaps there is a new combination or even a new style sheet I should be using.

So, what do I need to change the font size and other properties?

[morat]

You can style the inspector with the userContent.css file.

Code: Select all

/* Firefox userContent.css */

@-moz-document url-prefix("about:devtools-toolbox") {
  * { color: pink !important; }
}
@-moz-document url-prefix("chrome://devtools/content/") {
  * { color: orange !important; }
  :root {
    --theme-body-font-size: 18px !important;
    --theme-code-font-size: 18px !important;
  }
}

http://kb.mozillazine.org/UserContent.css

Reference (search for "Text sizes" comment)
resource://devtools/client/themes/variables.css

[manngo]

@morat Thanks for your reply. It worked perfectly, and the orange certainly stands out.

Was it always userContent.css? I thought that userChrome.css did the job in earlier versions.

I am trying to experiment using remote debugging, which works for userChrome.css. Is there a quick way of finding the userContent.css among the thousands of style sheets?

Thanks

[morat]

I think the file changed to userContent.css when the developers changed from xul to xhtml files.

I don't use remote debugging. I do debug extensions using the about:debugging page.

I don't know how to quickly select the userContent.css file in the style editor in the browser toolbox. The css files are not in alphabetical order and there is no search feature. Seriously lame. (designed by committee)

[manngo]

That makes sense. I think that was about version 69, which is when it stopped working.

I did eventually find userContent.css in the list, I can now experiment live.

Thanks again.