DevTools visual refresh coming to Nightly

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.

1 Like

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. :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.

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

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

1 Like

Hi Andrea, are you saying that you like your URL bar to be next to the main browser tabs? I understand the frustration with the loss of extensions, and I’m not sure if there’s a good solution for now, but I only work on devtools so I may not know the whole picture here. We do have a new condensed UI setting that may help if you just need more screen space.

Hi Anzumana, great to hear from you. The different background color for middle column actually came out of a discussion I had with Jason and Yulia - they felt that the old theme’s single background color made it difficult to focus on the more important stuff in the middle. I would be curious to know if after using the Debugger a couple more weeks, you get used to the new styling, or if it still feels immersion-breaking.

(It’s possible that it would look better if the difference between the two dark background colors could be lessened a bit… I’ll have to think about this.)

Hi larsek, thanks for your feedback! We’ve considered this, but having so many icons without text could look confusing. We do have plans to simplify the layout icons UI on the right side so that there will be more room in vertical mode; there are also plans to hide right-most panels under a menu when there isn’t enough room.

Hi Diego, thanks for the feedback. If you have visual feedback on DevTools you can mention it in this thread - if it’s more like a feature request you could create a new Discourse thread for it in the DevTools forum.

In case you missed it, Julien answered your first point :slight_smile:

Thank you the same for your reply, I hope mozilla community can do this, it would be excellent !!

Hi Victoria. Sory for delay (i have lost my previous email account so i couldn’t answer)
I was trying again using new theme for Developer Tools. Unfortunately after few days of using it, this color contrast is still distracting for me. In my opinion dark areas should be only few percent darker than light areas. Contrast should be more subtle:

  • if light backgrounds now are: H:240 S:8% B:17%
  • dark backgrounds shuld have: H:240 S: 5% B: 12%
    (not H:240 S:9% B:4% like it is new theme)

Coloring in Console: … Yes i was referring to this color-coding, and to filter panel. Better option for me is to permanently visible filters, and colored messages regarding filters. It is easier for me to find specific kind of console messages by color.

Another problem that occurs to me, is coloring of inactive html syntax lines in Inspector. It is all greyed out. There is no differences between attributes like it was in old theme.