DevTools visual refresh coming to Nightly

(Victoria Wang) #1

Hi all! This thread is for giving feedback on the new DevTools design changes (including new syntax colors) coming to Firefox 57 and landing in Nightly soon.

This post explains the changes:

(Dominik Moritz) #2

I love the UI changes coming to nightly! The new colors are great and as a person who spends a lot of time in the dev tools, this is a welcome improvement.

I wanted to ask a question about the console. In Firefox, the input is at the bottom, while Chrome puts it at the top right where the last line in the console is. Especially on large screens, I prefer the placement in Chrome. My eyes don’t have to move all the way from the bottom to the top where the output is. What is the reasoning for leaving it at the bottom?

(Rhys Powell) #3

I actually opened a bug related to this (Bug #1387916) so I’m really excited to see these changes. I always found the dark theme kind of hard to read due to various vision problems, but a cursory glance at the new syntax colors has me much more hopeful. Thanks for the great work!


Thanks for your work on this. I have some feedback:

  1. In the ‘Old HTML/CSS’ screenshot in the article, it looks like both HTML attributes (like class, id, dir etc.) and CSS properties (like border-top, background etc.) are in the same colour (red) while the values for both of these is blue. This consistency appears broken in the ‘New HTML/CSS’ screenshot, where the CSS properties are now blue while their values are red. Is this intentional? I would much prefer the ‘LHS=red and RHS=blue’ highlighting across both HTML and CSS.

  2. “This study on syntax highlighting showed that it’s beneficial to highlight a larger variety of keywords with different colors.” It is great if this was kept under consideration, because I have always wished that something like the wider colour variety of the old-old scheme (this is what existed before the current scheme appeared in v50 of Firefox) could make a return. Here is a quick before / after screenshot:

I like all the other changes, especially the calmer dark theme and the desaturation instead of translucency to de-emphasize stuff.

(Andrei Petcu) #5

Can you please add the old theme as an option?


The new theme looks really good, much appreciated. When I first noticed, it felt much better to me (and this is rare because syntax highlighting is usually a matter of long usage, and normally everything new is not easily welcome - but here it was different). Thanks for these improvements :heart:

There are some old bugs which might closed now:

as well as bugs that might be looked at again:

(Miron F) #7

Much appreciated all hard work but I think that this dark theme look bit odd. There is to much contrast between light an dark parts of UI. For me personaly the best theme was in developer edition. Here, for example:

Perfect balance between dark an light parts. Maybe too blue but very nice in contrasts. Also syntax coloring is very nice.

Other issue, bit off-topic. I don’t know if that was only an experiment but i have seen some changes recently in web console panel. The coloring was removed from console messages. Also filters were hidden on default. This was confusing. Finally i switched to old theme because this changes made workflow bit obstructing.

(Victoria Wang) #8

Hi Dominik, thanks for the feedback! I wasn’t able to do too much with Console UX for this release, but I’ll write this idea down for future work. I do like the last-line placement - more natural, and follows the pattern of typical command line apps.

(Victoria Wang) #9

Rhys, thanks for the feedback - great to hear that it’s working better for your vision! That console red you mentioned in your bug will also be fixed in Nightly soon. As you use Nightly, let me know if any other specific part stands out as needing improvement.

(Victoria Wang) #10

Bruce, thanks for the feedback! Re: consistency: This was intentional - I was working off a general hierarchy of blue being the primary color, magenta being second, and purple/navy being third. This results in nice visuals, but it does cause the logical mappings to be a bit different between HTML, CSS, and JS. I’ve been thinking about this a lot and may change it. I’d be interested to know if you still feel the same way about this after using Inspector for a week or two.

(Victoria Wang) #11

Andrei: Adding additional theme choices is something we might do in the future, at least for Debugger which uses CodeMirror highlighting.

(Victoria Wang) #12

nachtigall: Awesome, it’s great to hear that!! Thanks also for the bug links; I’ll look into them.

(Victoria Wang) #13

Miron, thanks for the feedback. After using dark theme in Nightly for a couople days, do you still feel that the contrast is too much?

Coloring in Console: Are you referring to the color-coding for Net, CSS, JS, etc that stable Firefox currently uses? I’ll be happy to think about this for Console work in the future.

(Dominik Moritz) #14

Thanks for getting back to me and thanks for writing down the idea. If there isn’t a clear preference for one or the other, this could be an option in the settings. Can you link me to an issue I can follow?

(Andrea Menabene) #15

Please I don’t understand why in customization options of Nightly it isn’t possible to move the address bar to the first row close to the tabs like I did in stable firefox with classic theme restorer and code on file “userChrome.css”.
Unfortunately next november this extension will not be available and also stable version come back to atlantis, sigh, in nightly already removed.
Anything can be customized on nightly but this not, you always pride with firefox because its high customization, but in this case I am interested for, do you think to improve this feature ?

(Anzumana Taal) #16

Overall great effort i have to echo what Miron was saying though.
The dark theme looks rly strange to me.
The main issue in my eyes is the contrast between the file in the debugger and the side panels.
When i go for a dark theme i always enjoy when its kind of an immersive experience.
The current colors breaks this sadly.

Rest as far as i can tell looks good.
Not sure what version of the firefox developer edition miron has but that looks great.
I checked in chrome and they also use the same colors to create the same sort of immersive experience.

Lets me know if there is anything i can do to help you. i am in slack (Anzumana) of the debugger. team


I really like these changes. The tabs look great and I appreciate your work on the devtools, as this is the part where I miss Chromium the most. Aside from that, as I often use the devtools in the vertical layout, the text/icon behaviour of the tabs seems a bit odd to me:

I’d expect the text to be hidden, instead of the icons, when shrinking the toolbar. But maybe thats just me? Thanks for the great work!

(Diego Fernandez) #18

Hi Victoria, I like the new tabs of the DevTools. :grinning:

What is the right place to give feedback about the devtools? One of the things that keeps me going back to Chrome are DevTools… I’ll love to contribute Firefox devtools at least by giving feedback.

About some of the version 57 changes:

  • I’m not big fan of the default flexible space added between the search bar and the toolbar icons. Not a big deal, and I understand the UX reasons to add the additional space by default, however when I saw the space after the update it I though that some add-on was broken.
  • I like the new menu layout. The ability to configure it is gone (or at least I couldn’t find it), but I never used it so not a big lost for me.

(Julien Wajsberg) #19

About your first point, you can remove the flexible space by right-clicking + “customize” :slight_smile:

(Saran) #20

Oh! I really want this new theme in my Atom and VSCode. :heart_eyes: