DevTools visual refresh coming to Nightly

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.

Hi Miron, thanks for the detailed feedback. I’ll give this some thought. The current colors were chosen because they match the main Firefox toolbar colors, and we’ll probably want to keep the DevTools toolbar the same dark color. I’ll have to consider a lighter color for the sidebars. I’m also thinking less text/bg contrast in the sidebars would help as well.

Regarding inactive HTML - I agree that it was too grayed out. We reverted the change for now and I worked on new semi-desaturated colors that should solve the problem.

Thank You for the answer. Can you tell me if is there any way to make custom theme for DevTools? Maby some API or some sort of userChrome.css version for DevTools?
If not, mayby it is possible do additional "Low Contrast theme " in Options -> Theme section.
Now you have there three Dark, Light, Firebug themes. So there is space for another theme switch.

Honestly, i’m fairly disapointed that so powerfull UI theme customisation will be limited in new versions of Firefox.

There currently isn’t a way to make custom themes, but we’re planning to add support for them: https://bugzilla.mozilla.org/show_bug.cgi?id=1281118

Nice, but i assume this only refers to syntax highlight theme. What about UI? Background colors, scrollbar colors ect. Any plans for API? Maybe this could be included to new themes system (Personas) API in the future?

What about XUL? Guys in comments related to the bug referes to XUL technology. This feature will be depreciated or no? I don’t see any warnings about depreciation in MDN docs? Sorry but now i’m bit confused.

Example here: developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Template_Guide/Introduction (No warnings that this is legacy technology?)