Modernize some panel styles and colors

[federicobond]

Description

This is a first pass at updating and modernizing panel styles. Takes some cues from the design language of the built-in Django Admin UI, especially table headers and colors.

I've also updated some column headers and placed units like ms beside each value instead of up in the headers. This improves legibility and allows expressing each value with appropriate units if necessary later.

Where appropriate, I've reduced the precision of some duration values displayed to a more meaningful value.

I would like to follow up this with specific improvements to the information layout of some panels.

Screenshots

Note: the Time column width has been fixed after the screenshot was taken.

Checklist:

• I have added the relevant tests for this change.
• I have added an item to the Pending section of docs/changes.rst.

[github-actions]

Coverage report

Click to see where and how coverage changed

File	Statements	Missing	Coverage	Coverage (new stmts)	Lines missing
debug_toolbar/panels
timer.py
debug_toolbar/panels/sql
utils.py
Project Total

This report was generated by python-coverage-comment-action

[federicobond]

Hi @tim-schilling @matthiask, hope you’ve had a great start to the year! 🎆 No rush, but when you have a moment I’d love to keep this moving. I have several ideas for improving the design of the panels.

[tim-schilling]

Understood and thank you for for leading this! I'm really appreciative of your time and energy.

Unfortunately, the toolbar is one of my lower priorities at the moment. It will be a few weeks before I have time to look at things.

@django-commons/django-debug-toolbar-committers are any other folks available for a thorough review?

[federicobond]

No worries, I understand!

[tim-schilling]

This looks great! So much better. I do have some small things I think we should clean up. If they are challenging, please let me know and we can probably punt on them.

• The close button on panel's need's a greater contrast for all modes (it's gray on white).
• The code background for dark mode on the Templates Panel could be a different color other than black.
• The yellow highlighting on the profiling panel is unreadable with the white font on dark mode.
• The variable table's header text is a dark gray on a darker gray background in the Request Variables column of the history panel for dark mode. Reproduce with http://127.0.0.1:8000/admin/auth/user/?q=test

[federicobond]

Thanks for the review, @tim-schilling. I believe I've addressed all your points.

[tim-schilling]

Looks great! Thank you for making those changes. I'd like to get another person from @django-commons/django-debug-toolbar to review [the UI changes] before merging. It's a really nice change, but others may spot something we're missing. Thank you for your patience @federicobond!

[matthiask]

I didn't test it but everything makes sense from a cursory read. Thank you!

[tim-schilling]

I merged in main, reworked through all the panels to confirm things look good, and moved the changelog items to the pending section. If the tests pass, I'll squash and merge this.