Problems customizing colors used in Developer Tools UI

Discuss application theming and theme development.
Post Reply
phkhgh
Posts: 845
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Problems customizing colors used in Developer Tools UI

Post by phkhgh »

UPDATE: 01/10/2019 after I wrote post below.
I took ONLY the code from cor-el at mozilla support & put it in a new copy of userChrome.css by itself (backed up old one).
1st - good news: I removed code to change font color, but did make it bold & a bit larger - and it worked, sort of.

The userChrome changes for devtools ONLY work if started using Ctrl+Shft+K - which technically opens the Console (Web Console, I believe). By that method, all other devtools are shown on toolbar & active. And it made the background black & fonts bold - much better.
Earlier, I didn't realize that starting devtools using Ctrl+Shft+K was actually making background black, but all white text (even though white wasn't specified).

THE BAD NEWS: 1) If I start devtools using menu - Web Developer / Browser Toolbox, the userChrome edits are NOT applied. Bug? It's the same, default foreground / background colors of the native devtools dark theme. The userChrome currently has no @namespace of any kind.

2) When devtools are started by Ctrl+Shft+K, then Inspector won't / can't inspect any Fx toolbars, tabs, etc. On chrome pages, it can inspect the page, but not browser toolbars.
I checked & when that happens, devtools settings are checked: "Enable browser chrome & addon debugging toolboxes" and "Enable remote debugging." Just don't work.

3) Once opened w/ Ctrl+Shft+K, if another web page / tab is loaded, devtools closes - completely. I know, because it doesn't complain when I restart devtools, that firefox is already running.
Issue # 2 is a major deal breaker. I have no idea what would cause it - never seen or read of it happening. What's the troubleshooting method to find why devtools closes when a web page loads?
4) I don't know if the devtools edit in userChrome will work, after adding the other necessary stuff back. At this point, I'm not sure whether to use ANY @namespace, anywhere in userChrome.
Aris says - probably don't use them - anymore - esp. if having problems.

I'd still appreciate help - on most recent problems. This is the code in userChrome, by itself w/ no @namespace line.

Code: Select all

@-moz-document url-prefix(chrome://devtools/content/) {
body * , .CodeMirror-line *, #output-container {
  font-size: 12px !important; 
  font-weight: bold !important; 
  background-color: black !important;
   }
.devtools-tab *,.splitview-nav > li *{
  font-size:12px !important;
  background-color: black !important;
 }
.devtools-tab.selected *{
  font-weight:bold !important; 
  background-color: black !important}
.tab-panel-box .inspector-tabpanel {
  font-size:12px !important; 
  font-weight:bold !important}
.splitview-nav > li.splitview-active *{
  font-weight:bold !important} 
}



In Firefox 64.0, Linux Mint 18.1, I'm having problems changing any, much less most markup colors that Devtools uses in dark theme.
I've also tried the same things in Fx 60.4esr (Tor Browser) - none have worked.

Basically, there isn't enough contrast between text & the (not black) background in all tools of devtools. The colors used will depend on what type file is viewed & in which tool (CSS, JS, HTML, etc.).
1st, need to change all backgrounds of all tools (or most) to black / #000000. Don't care about toolbars in devtools - only panes where have to read code.
The devtools dark-theme markup colors (for each file type) in Fx 64 might be OK, if I could get bold to work & make BG color black.

Things I've tried.
Looked at https://www.hongkiat.com/blog/personali ... ols-theme/ & used it, but things may've changed since the 2016 article date? Couldn't make it work - as is, or using tips from other articles & posts - using a different 1st line statement.
I understand Preethi Ranjit on Hongkiat.com got ":root.theme-dark { " right out of dark-theme.css. That working in a Fx chrome css file (theme) with dozens of other files that may interact (such as @import rules VS. putting it straight in userChrome.css are 2 different things. Maybe it worked in older Fx versions.

On support.mozilla.org, in NOV 2018 cor-el gave a user some code to increase contrast between text & background.
I tried some code in userChrome.css above the @namespace line. It is not always easy top style devtools elements because of namespace issues.

Code: Select all

@-moz-document url-prefix(chrome://devtools/content/) {
 body * , .CodeMirror-line *, #output-container {font-size: 14px !important; font-weight: bold !important; color:white !important }
 .devtools-tab *,.splitview-nav > li *{font-size:14px !important; color:white !important}
 .devtools-tab.selected *{font-weight:bold !important}
.tab-panel-box .inspector-tabpanel {font-size:14px!important; font-weight:bold !important}
.splitview-nav > li.splitview-active *{font-weight:bold !important}
}
I didn't leave the pure white for text (color:) - removed that declaration, don't want all white text, but this didn't change any backgrounds to black on any tool. That's with any @namespace line above or below the code in userChrome, or removing it completely. I tried some other 1st lines to replace cor-el's "@-moz-document" statement, that I found on various sites. None worked.

Another post https://support.mozilla.org/en-US/questions/1198481, JAN 2018, cor-el gave a bit different way to modify fonts.
Note that the code won't work directly in userChrome.css
You really need to use a separate file via @import url(devtools.css); in userChrome.css.

This code is for the left panel in the Inspector that shows the markup code.
the body has this class name.
<body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application">

I can see that the code is applied.

Code: Select all

@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){
 body {
   font-family: "Consolas" !important;
   font-size: 12px !important;
   font-weight: bold;
 }
}
When the OP noted that only changed one thing (so I guess it worked for him - partly), cor-el went on:
That is the HTML code of the left panel in the Inspector, so you can see that it has the class name you posted above (.devtools-monospace)
Each of the panels has it own chrome URI.

Code: Select all

@-moz-document 
url(chrome://devtools/content/framework/toolbox-options.xhtml),
url(chrome://devtools/content/inspector/inspector.xhtml),
url(chrome://devtools/content/webconsole/webconsole.xhtml),
url(chrome://devtools/content/debugger/new/index.html),
url(chrome://devtools/content/memory/memory.xhtml),
url(chrome://devtools/content/netmonitor/index.html),
url(chrome://devtools/content/dom/dom.html) {
 body {
   font-family: "Consolas" !important;
   font-size: 12px !important;
   font-weight: bold;
 }
}
@-moz-document
url(chrome://devtools/content/styleeditor/styleeditor.xul),
url(chrome://devtools/content/performance/performance.xul),
url(chrome://devtools/content/storage/storage.xul),
url(chrome://devtools/content/scratchpad/scratchpad.xul){
 * {
   font-family: "Consolas" !important;
   font-size: 12px !important;
   font-weight: bold;
 }
}
Of course each tool has its own markup file, but is this the only or easiest way to change (background, text, font-weight & size) & if necessary, change a few sorta pastel colors?
But again, I couldn't even get cor-el's bit of code to work for fonts in left panel of Inspector. So there's no point in duplicating code for all other tools, if changing fonts in one panel of one tool isn't working.

I'd appreciate it if anyone sees a mistake or has a different idea - maybe something changed in Fx 63 or 64, that broke the codes shown.
Thanks.
Post Reply