Closed Bug 1273130 Opened 8 years ago Closed 7 years ago

Revisit Dark Theme Syntax Highlighting

Categories

(DevTools :: General, defect, P2)

Product:
DevTools
Component:
General
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED WONTFIX

People

(Reporter: hholmes, Unassigned)

References

Details

Attachments

(3 files)

ffdevtools_dark_theme_49_color_syntax_highlighting.png
189.34 KB, image/png
Details
js_debugger_colors.png
35.90 KB, image/png
Details
Highlighting_of_Hidden_vs_Visible_Element.png
100.65 KB, image/png
Details 
This is a bug for tracking the syntax highlighting issues brought up in 1270990. Idea is to sit on these changes for a couple of weeks and decide if they're worth fixing or not.

- The contrast between the white and purple colors in the syntax highlighting might need to be revisited.
- The red and green both have really high contrast to the point of being a little glaring.
Depends on: 1270990
After upgrading from 48 to 49 I was just about to file a bug until I found this one ;) Syntax highlighting is surely a matter of taste and "familiarization". Left these things apart I find the new colors much harder to differentiate. See attachment ffdevtools_dark_theme_49_color_syntax_highlighting.png

1. The attributes' keys and values look very much the same (greyish and whitish). Not all of us have very high contrast monitors ;)

2. The vertical line is ping whereas the element names stay greenish

This holds also true for the JS debugger, which is now much harder to read imho.

I liked the old colors much better (see screenshot). They are also closer to popular dark color schemes as used by Sublime or Intellij Idea. Because the colors are a matter of taste and familiarization I would suggest to use one that is well established for the dark theme instead of creating a new (different) one from scratch.
Just one additional note concerning attachment 8762474 [details]
3. The background scheme should be darker to increase readability. Compare to previous dark theme. But this might be the same issue as in Bug 1273925
Hello everyone, I've come here for the same reason: it's kind-of difficult for me to read the new dark colour scheme... The purple background is very light!
Attached image js_debugger_colors.png — 
After working a few hours with it: 

4. On selected element there is no syntax highlighting at all, e.g. in attachment 8762474 [details] the <ul id="nav-access"> is just white on blueish. When hovering over elements then there is syntax highlighting, but the background is even lighter than normal (hard to read).

5. The colors in the debugger looks very random to me. Blue breakpoints (white on blue when active) and green line highlighting. See new attachment. I think the hover/selected line colors should be same as in Inspektor.
Hello. In my opinion, although the colors pass the AA test, they remain difficult to distinguish, beyond the contrast. Furthermore, there are not harmonic and pleasing to the eye.
I agree with scheco, these colors seem faded and aren't as pleasing (to me at least) as the old ones. In fact, it's a big enough deal that it caused me to sign in to bugzilla for the first time in months to comment on it.

I have two suggestions: 1.) choose a popular color scheme like solarized or similar to emulate, or 2.) allow custom color schemes so developers can tweak the dev tools' CSS themselves.
As always, it's a matter of taste and familiarization, but if you are gonna follow a dark theme, IntelliJ's Darcula is a nice-looking well-established one.
Daniel: nope, gotta use Gruvbox. It's the only truly well done dark theme. :P

In all seriousness though, this is why allowing people to make and install custom themes would be a good idea.

Also even though I prefer Gruvbox, I'll take any well-established text editor theme over what we've got right now.
Forgot to mention: the previous dev tools theme would work as well, I'm still confused why it was replaced with this one. From the outside looking in, it seems like change for the sake of change, not sure if there was reasoning behind the change that I am unaware of though.
@Daniel and @flyingfisch: I created Bug 1281118 "Make it Easy to Use Custom Syntax Highlighting" for this. Maybe you can help or share ideas over there. I'm sharing it here as I do not seem to have permission to add a "See also" here.
(In reply to Jens from comment #12)
> @Daniel and @flyingfisch: I created Bug 1281118 "Make it Easy to Use Custom
> Syntax Highlighting" for this. Maybe you can help or share ideas over there.
> I'm sharing it here as I do not seem to have permission to add a "See also"
> here.

I marked it.  By the way, you can ask for editbugs permission here: https://bugzilla.mozilla.org/page.cgi?id=get_permissions.html
See Also: → 1281118
(In reply to Brian Grinstead [:bgrins] from comment #13)
> (In reply to Jens from comment #12)
> > @Daniel and @flyingfisch: I created Bug 1281118 "Make it Easy to Use Custom
> > Syntax Highlighting" for this. Maybe you can help or share ideas over there.
> > I'm sharing it here as I do not seem to have permission to add a "See also"
> > here.
> 
> I marked it.  By the way, you can ask for editbugs permission here:
> https://bugzilla.mozilla.org/page.cgi?id=get_permissions.html

(I added permissions to Jens' account.)
I noticed another part that could need improvement: There's a nice feature that the colors of hidden elements are a bit faded in the inspector. Anyway, I think the contrast is not high enough WRT visible elements. Hidden and Visible is hardly distinguishable IMHO. See attached screenshot. 

(This probably was already an issue before the syntax highlighting was revised. But the difference is so low, that I only noticed this feature today by accident.)
The new color scheme for syntax highlighting and the reorganized context menu are extreme bad, sorry. Sometimes I ask myself why you always do bad things than good things? It always sounds like: Hey guys, look what we have done! Woooohoo.

I really want to ask you now a few questions: What was wrong with that "old" color scheme???? Is your new color scheme developer totally color-blind. Do you all have a error in taste??? Do you like to browse through useless submenus to get to the real important stuff??? Ahhhhhhhhhhhhhh, what have you done?????

Are you really working with the devolper tools every day or do you only want to irritate all the web developers? Sorry guys..., I really love firefox but until now I don't see any brilliant improvement  to the dev tools although a lot of creative people voted on your website which - sadly - now is gone!

Like all people said: This new color scheme is very awful and what I really dont like is the fact that your absolutely don't care about the real users! Sure you ask for ideas but then you don't implement them! Why?

Did I forget something???? Ahhhh yes...., for your last big coup you are now planing to to bring the excellent firebug to the same level!? Are yor kidding???? My goodness, what a mess! :(

PS: You really had a few approaches with the dev tools in the past... but now your are going to ruin it!
how to return the old color scheme?
Where can I, as a user, vote on changes like this before they are implemented? Do you even consider your user base, or are you just a few people in a room who say "lets change it"?

The previous theme was fine, the new one is a strain on the eyes, ruined my morning and makes me consider downgrading just so I'd no longer have to look at it. I chose the dark theme to have dark colours, not a mix of dark-ish background and light colours that make me want to throw up.
Note to anyone planning to comment on this bug - please have a look at the Bugzilla etiquette page before doing so, specifically the "Commenting" section: https://bugzilla.mozilla.org/page.cgi?id=etiquette.html
(In reply to Stijn Herreman from comment #18)
> Where can I, as a user, vote on changes like this before they are
> implemented?

We discuss devtools development primarily on bugzilla, a mailing list, and irc: https://wiki.mozilla.org/DevTools/GetInvolved.
We've discussed this with Stijn Herreman directly on IRC today.

Changes to the UI aren't taken lightly, we know that any change can result in user frustration, so we try and be mindful about them. Having said this, changes are needed, they are our way to progress, so we must make them and take decisions. But because of the large number of users, any change to the UI has the potential of impacting someone negatively. We try and make sure most people benefit though.

Regarding the change of theme however, the feedback seems to be mostly about how pleasing it is to look at. That's a highly subjective thing, which is very hard for people to agree on.

I think the best course of action is to ensure our themes are customizable, or that people can use their own themes.

This is already sort of possible with Firefox's userChrome.css feature, as described here: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin

I've also filed bug 1306272 for supporting custom devtools themes.
Oh, I guess bug 1306272 is a dupe of bug 1281118 actually.
The new dark theme has been in place for 3 releases now (since Firefox 49), so I guess there won't be coming much more feedback... I admit I actually got used to the new colors so far that I do actually like them by now ;) Nonetheless, some issues raised here are still valid in my opinion - especially the purple background is a too light. 

This ticket lists all (minor) things pretty good I think.

Helen, any time schedule here?
Flags: needinfo?(hholmes)
The themes are changing, as explained here: https://blog.nightly.mozilla.org/2017/09/11/developer-tools-visual-refresh-coming-to-nightly/
This bug is therefore obsolete. Let's close it.
Status: NEW → RESOLVED
Closed: 7 years ago
Flags: needinfo?(hholmes)
Resolution: --- → WONTFIX
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: