[Feature]: Improve network tabs naming in Trace Viewer

[cpAdm]

🚀 Feature Request

When focusing on a network call in the trace viewer, show the following tabs:

• Headers (with collapsible sections: general (including start- & end-time), response headers, request headers)
• Payload (if given)
• Response
• Copy dropdown

Ideally also there should be more spacing between the property keys and values

Example

Current situation:

Newly suggested layout/names:

Motivation

The current tabs are confusing, and the copy buttons are hidden at the bottom of only the first tab. The new layout is clearer and aligns more with devtools in popular browsers.

I would be willing to implement (part of) these improvements.

[agg23]

It's unclear what you want to see. Could you possibly provide screenshots and a more thorough description with motivation for each change?

[cpAdm]

@agg23 I have updated the ticket with screenshots. So, its more about moving some components around to get it more aligned with browser devtools that we developers/testers are familiar with.

Additionally, each section inside a tab should be collapsible (and remembered) to let the user decide what he finds important. And by providing extra space between the keys and values it becomes way easier to read.

If you want to know more (details), let me know.

[agg23]

Understood. This seems like a reasonable request. We will consider a PR if you submit it.