feat: Improve network tabs trace viewer

[cpAdm]

Improvements to network resources tabs:

• Updated tab names/layout to be more in line with popular devtools
• Sections inside a tab can be collapsed (and is remember in storage)
• Copy buttons are now more visible inside a dropdown in the toolbar
• key-values can now easier be distinguished by the new spacing

Current situation:

After:

Closes: #35214

[dgozman]

@cpAdm Thank you for the PR! Unfortunately, I find it very hard to review. For some reason, components moved around which makes the diff very large. The PR seems to do multiple things, and I'm not sure what change does what.

Could you please make a small PR focused on a single thing? I think that would be easier to iterate on. Thank you!

[cpAdm]

@dgozman I am used to define my sub-components before I use them. That's why I moved many around, but it does indeed make the PR harder.

I still have to move stuff like setRequestBody/setResponseBody since the copy buttons have moved to the toolbar.

I hope the PR is more readable now. Possibly the only thing I could still do to make it more readable is splitting the PR in 2:

1. first moving the copy buttons,
2. the rest

[github-actions]

Test results for "tests 1"

2 flaky

⚠️ [firefox-page] › tests/page/page-evaluate.spec.ts:403:3 › should throw for too deep reference chain @firefox-ubuntu-22.04-node18
⚠️ [playwright-test] › tests/ui-mode-test-watch.spec.ts:145:5 › should watch all @ubuntu-latest-node18-1

38815 passed, 809 skipped
✔️✔️✔️

Merge workflow run.

[cpAdm]

@dgozman Created new PR for the 'copy buttons' part #35366