DevTools visual refresh coming to Nightly

(Victoria Wang) #21

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.

(Victoria Wang) #22

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.

(Victoria Wang) #23

(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.)

(Victoria Wang) #24

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.

(Victoria Wang) #25

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:

(Andrea Menabene) #26

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

(Mironf) #27

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.

(Victoria Wang) #28

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.

(Mironf) #29

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.

(Victoria Wang) #30

There currently isn’t a way to make custom themes, but we’re planning to add support for them:

(Mironf) #31

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: (No warnings that this is legacy technology?)

(J. Ryan Stinnett) #32

The only reference to XUL there is about using userChrome.css to make customizations right now by overriding browser styles directly.

I would expect Firefox to still support this file for some time even as more things transition away from XUL, but I don’t want to promise anything either.

Still, if want a custom UI now, you could use it for the browser and DevTools UI.

Not sure about the details of current plans for supported DevTools theming beyond syntax colors, so hopefully someone else will chime in about that.


Where are the POST params? I can see GET URL params if I expand the XHR lines in the console but the Params tab for POST requests is empty.

(Nicolas Chevobbe) #34

Hello, You must be hitting this
This is fixed on Nightly. And if you are looking for your POST params, you can still open the netmonitor when you need to until the fix hits release, or download Beta/DevEdition/Nightly :slight_smile:


Well, thanx. I installed nightly but it still doesn’t work properly. It used to show params for jQuery.ajax requests when passing data as a string but not as an object, now it’s back to the old behaviour claiming no params. no cookies and no headers were sent although I can clearly see in my web app’s log that they were sent just fine. Net monitor is not an option as it shows too much stuff. Can’t work with this, I’m reverting back to 56.0.2 until it’s properly fixed.

(Nicolas Chevobbe) #36

Interesting. Could you paste here an example of the jQuery ajax call you are doing so I can set up a simple test case and fix this ?
Thanks !


Reported here: