Partial fix for Console colors

[Lawrence San]

I've written here a couple of times before about the colors in my DevTools Console displaying weirdly -- ordinary log text in orange or red, and error text in black. Apparently a lot of people are not seeing this problem; maybe it's because I'm on a Mac? Or something specific to my FF profile?

Anyway, after a lot of research and experimentation, I've been able to partially fix the problem, for the Light and Dark themes. I have _not_ been able to fix the pink or red text in the Firebug theme, however. In any event, in case it helps someone else, I'm pasting below the code (with comments) that I added to my userChrome.css file. (BTW, the font sizes I set are just to start; I discovered that I can zoom the text in and out in the Console the same way I can in an ordinary Firefox page.)

/* FIX SCREWBALL FONT COLORS IN MOZ DEVTOOLS: */

/* This fixes ordinary console.log text color, which was appearing in orange!, and also makes other UI changes: */

:root.theme-light { 

--theme-highlight-lightorange: black !important; 

font-size: 13px !important;

line-height: 1.7 !important;

/* Make Console bkgrnd color light tan instead of white: */

--theme-body-background:  #ECE9D9 !important;

/* For more devtools CSS selectors, see https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors  and also webconsole.css (which is inside the big compressed package of devtools stuff in the FF profile). */

}

/* This fixes ordinary console.log text color, which was appearing in orange!, and also makes other UI changes: */

:root.theme-dark { 

--theme-highlight-lightorange: #d0edd0 !important;   /* dull light green */

font-size: 14px !important;

line-height: 1.7 !important;

/* After MUCH research & experimentation, I could not figure out how to alter the font-family from default 'monospace'. */

}

/* NOTHING I tried worked for the Firebug Theme (:root.theme-firebug) at all; the ordinary Console log text is still showing up in red. I experimented a lot; forget it. Use one of the 'standard' themes, the functionality is the same anyway. */

[Sebastian Zartner]

On Monday, April 24, 2017 at 1:32:28 AM UTC+2, San wrote:

I've written here a couple of times before about the colors in my DevTools Console displaying weirdly -- ordinary log text in orange or red, and error text in black. Apparently a lot of people are not seeing this problem; maybe it's because I'm on a Mac? Or something specific to my FF profile?

It's nothing special regarding your machine. It is also an issue on other platforms (and Firefox profiles). I assume former Firebug users just have other issues they prioritize. Non-the-less, I've put this issue on the list of most important Firebug gaps.

Anyway, after a lot of research and experimentation, I've been able to partially fix the problem, for the Light and Dark themes. I have _not_ been able to fix the pink or red text in the Firebug theme, however. In any event, in case it helps someone else, I'm pasting below the code (with comments) that I added to my userChrome.css file. (BTW, the font sizes I set are just to start; I discovered that I can zoom the text in and out in the Console the same way I can in an ordinary Firefox page.)

/* FIX SCREWBALL FONT COLORS IN MOZ DEVTOOLS: */

/* This fixes ordinary console.log text color, which was appearing in orange!, and also makes other UI changes: */

:root.theme-light { 

--theme-highlight-lightorange: black !important; 

font-size: 13px !important;

line-height: 1.7 !important;

/* Make Console bkgrnd color light tan instead of white: */

--theme-body-background:  #ECE9D9 !important;

/* For more devtools CSS selectors, see https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors  and also webconsole.css (which is inside the big compressed package of devtools stuff in the FF profile). */

}

/* This fixes ordinary console.log text color, which was appearing in orange!, and also makes other UI changes: */

:root.theme-dark { 

--theme-highlight-lightorange: #d0edd0 !important;   /* dull light green */

font-size: 14px !important;

line-height: 1.7 !important;

/* After MUCH research & experimentation, I could not figure out how to alter the font-family from default 'monospace'. */

}

/* NOTHING I tried worked for the Firebug Theme (:root.theme-firebug) at all; the ordinary Console log text is still showing up in red. I experimented a lot; forget it. Use one of the 'standard' themes, the functionality is the same anyway. */

Try .theme-firebug .console-string as selector. Note that you can inspect Firefox' UI and by that find out the selectors using the Browser Toolbox. Having said that, I didn't try myself to change userChrome.css to adjust the log display.

Sebastian