General section

UX Designs
https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-(V)?node-id=171%3A93

URL

See UX Designs https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-(V)?node-id=142%3A0
The raw URL should be limited to 5 lines (using line-clamp), showing (...) at the end.
Method should stay in front of the URL all the time (expanded or not), should use bold font.

• Non-expanded URL should be selectable and copyable
• Should be expandable
  Children:
  URL parts (Scheme, Host, Filename)
  Show separator
  Query string

Summary

New Content Blocking classification + warning
SUMO article that explains categories
“Enhanced Tracking Protection” or “Tracker Classification”
New grid layout
Add links to the corresponding tabs

This is needs a few things to complete, but is ready for gathering initial feedback

• Added a new Url Preview Component
• Refactored the UX for the summary sections
  Todo
• Fix the tests
• Fix Console errors
• Cleanups
• Rebase over D71916 after that lands

Setting NI on myself to check how this works with RTL.

RTL looking great.

https://hg.mozilla.org/mozilla-central/rev/68403b89e71f

I noticed that the info icon/links are missing from the status codes. Is that intentional?
Compare Fx77: https://www.screencast.com/t/73ebPOZV
with Fx78: https://www.screencast.com/t/kbyWuyWJvddL

Good catch, thanks Janet.
I created bug 1645748 for this.

Honza

Updated the screenshot for Network Request details, but holding off on textual updates pending bug 1645748.