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: https://blog.nightly.mozilla.org/2017/09/11/developer-tools-visual-refresh-coming-to-nightly/
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?
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:
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.
ā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.
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 
There are some old bugs which might closed now: https://bugzilla.mozilla.org/show_bug.cgi?id=1273130
as well as bugs that might be looked at again: https://bugzilla.mozilla.org/show_bug.cgi?id=1281118
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.
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.
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.
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.
Andrei: Adding additional theme choices is something we might do in the future, at least for Debugger which uses CodeMirror highlighting.
nachtigall: Awesome, itās great to hear that!! Thanks also for the bug links; Iāll look into them.
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.
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?
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 ?
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!
Hi Victoria, I like the new tabs of the DevTools. 
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:
About your first point, you can remove the flexible space by right-clicking + ācustomizeā 
Oh! I really want this new theme in my Atom and VSCode. 
