Color of main Console text

[Lawrence San]

I've been using the built-in Firefox tools for a while, and although I mostly like them, the color of Console text is annoying me.

With the Firebug theme, the main Console text looks pinkish-red. With the Dark theme, it looks orange. I don't remember the Console text in the real Firebug being red! Is there some way to configure this? Or are other people seeing something different -- is there just something peculiar going on in my system?

Thanks, 
Lawrence

[Sebastian Zartner]

Here is a comparison between the both (left Firefox DevTools, right Firebug):

There are obviously several differences between Firebug and the Firefox DevTools Firebug theme, though the main text color within the console is black.

If you see something else, you should check whether you've installed some theme or some user style via Stylish influencing the display.
Otherwise you should consider creating a bug report at Bugzilla. (That's the place where DevTools Firebug theme issues are tackled.)

Sebastian

[Erik Krause]

Am 15.11.2016 um 13:08 schrieb Sebastian Zartner:
> There are obviously several differences between Firebug and the Firefox
> DevTools Firebug theme, though the main text color within the console is
> black.

Is there a particular reason for that? The background is slightly
blueish in devtools compared to old firebug and text that was red
previously in HTML pane is now pink in Inspektor pane, which gives a
slightly less readable combination.

See http://ge.tt/9X6xr8h2

I also dislike the abbreviation of the long classes list. Is there a
possibility to change that?

--
Erik Krause
http://www.erik-krause.de

[Lawrence San]

Sebastian, I'm seeing something quite different from your screenshot. With the Firebug Theme on, my Console background is white, not yellow. The text from the Net tab is black, but I don't use that much. The text from the Logging tab (which I mostly use) is all red, both from JS and from PHP -- and these are just normal calls from a regular PHP or JS file, not errors. For example, this:

    console.log("graphicSeriesScripts.js has loaded.");

... appears in red text on a white background, with a vertical light-gray bar to the left of all the text.

However, my gut feeling is that this isn't a bug, just something I don't understand. I'm not using Stylish and haven't put anything about the Console into a user CSS file. I am using Classic Theme Restorer and Theme Font & Size Changer, but I don't see anything in either of those extensions that would explain this. Any idea what might be going on?

Almost everything I see in your screenshots, in black text on yellow, looks like warnings of some kind. Could you try an ordinary console.log call and see what it looks like?

Thanks, Lawrence

[Sebastian Zartner]

On Tuesday, November 15, 2016 at 7:24:13 PM UTC+1, Erik Krause wrote:

Am 15.11.2016 um 13:08 schrieb Sebastian Zartner:
> There are obviously several differences between Firebug and the Firefox
> DevTools Firebug theme, though the main text color within the console is
> black.

Is there a particular reason for that? The background is slightly
blueish in devtools compared to old firebug and text that was red
previously in HTML pane is now pink in Inspektor pane, which gives a
slightly less readable combination.

See http://ge.tt/9X6xr8h2

As far as I know, there is no reason for that. Some things may have changed since the Firebug theme got implemented and the Firebug theme just didn't get adjusted accordingly.
I've now filed bug 1318259 asking to fix those smaller and bigger issues.

I also dislike the abbreviation of the long classes list. Is there a possibility to change that?

I don't think there is an option for that. As that's something independent from the Firebug theme, I'd like to ask you to file a separate bug for this.

On Tuesday, November 15, 2016 at 9:39:48 PM UTC+1, San wrote:

Sebastian, I'm seeing something quite different from your screenshot. With the Firebug Theme on, my Console background is white, not yellow.

The yellow background is shown for warnings.
 

The text from the Net tab is black, but I don't use that much. The text from the Logging tab (which I mostly use) is all red, both from JS and from PHP -- and these are just normal calls from a regular PHP or JS file, not errors. For example, this:

    console.log("graphicSeriesScripts.js has loaded.");

... appears in red text on a white background, with a vertical light-gray bar to the left of all the text.

However, my gut feeling is that this isn't a bug, just something I don't understand. I'm not using Stylish and haven't put anything about the Console into a user CSS file. I am using Classic Theme Restorer and Theme Font & Size Changer, but I don't see anything in either of those extensions that would explain this. Any idea what might be going on?

Almost everything I see in your screenshots, in black text on yellow, looks like warnings of some kind. Could you try an ordinary console.log call and see what it looks like?

You're right. The text of messages logged via the console API (i.e. console.log(), console.info(), etc.) is indeed red. That is definitely a bug in the theme. I've added this to bug 1269730, which I've filed some time ago.

If you want to help, you can provide patches for those bugs. A description for how to contribute to the Devtools can be found on MDN.

Sebastian

[Erik Krause]

Am 15.11.2016 um 19:24 schrieb Erik Krause:
> I also dislike the abbreviation of the long classes list. Is there a
> possibility to change that?

There seems to be a setting for this in about:config. Set
devtools.markup.collapseAttributes to false.

[Lawrence San]

Sebastian said:

You're right. The text of messages logged via the console API (i.e. console.log(), console.info(), etc.) is indeed red. That is definitely a bug in the theme. I've added this to bug 1269730, which I've filed some time ago.

Using the Dark theme instead of the Firebug theme, ordinary console log messages still look weird to me -- orange text on a black background. Why orange?  I wonder if that's related to the Firebug red text.

Also, right below that orange text (which are my ordinary log messages), there's a warning "navigator.battery is deprecated. Use navigator.getBattery() instead."  It claims this is coming from my HTML page, which is wrong -- I never even heard of "battery" anything and I'm using a desktop, not a laptop. 

But what's also strange is that the bogus "battery" line, which clearly IS a warning (and has an orange warning icon), is in light gray text on the black background -- that's where I'd expect red or orange text. 

I see a similar inversion in the Light theme -- regular console.log items in orange, warnings in black.

So it looks like -- in EVERY theme -- they got the regular and warning colors inverted. I'm guessing it's not a coincidence -- perhaps they got the underlying labels or tags or whatever it is swapped between regular and warning text, and all the theme colors are responding to the same wrong set of tags?

[Sebastian Zartner]

Coincidentally Tim Nguyen asked to change the colors and icons on bug 1269730.

Sebastian