Polish Headers Side Panel Ask questions
The Headers side panel (in the Network panel) would deserve some UI/X clean-up
(this might be done as part of the Accordion refactoring see bug:
There are currently three expandable sections:
- Response Headers
- Request Headers
- Request headers from upload stream
- Rename the third one to
- Turn the general info at the top into an expandable section called
- Move the
Edit and Resend button to a new toolbar located at the top of the panel
WDYT? @digitarald @bomsy @fvsch
- Content for the summarized section
- Single-line summaries for
- Request: Method + Host + Path → Link to Request tab
- Response: HTTP Code → Link to Request tab
- HTTP/TLS Version → Link to Security
- Size / Transferred Size + Time to Load → Link to Timing
- Blocked Cookies? → Link to Cookies
- Referrer Policy
- Information hierarchy:
- Summary, Headers (Request, Response)
- Stack Trace
- Summary + URL Params (Formatted/Raw) + Headers (Request/Response)
- Combined headers section in summary vs headers inside Request/Response tabs
2. Request (Formatted/Raw)
3. Response (Formatted/Raw)
- WebSockets in Messages or Response?
- How could a consistent raw/pretty split/toggles for all data types (headers, params, payloads, cookies)
- Obvious copy/save for whole raw/pretty sections or specific entries and their parts (mostly name/value)
- How would a Copy/Save button work for the whole request/response?
- How would state for pending request, streamed request/response look like?
- Move Edit & Resend UI in the left sidebar to iterate on request data while observing responses
- Consistent filter in all important data types, to the top to be consistent with the other panels
- How would the filter in the headers section be top-aligned
- Info panel header that highlights REST
- How to allow seamless selection of text sections
- Rename the third one to
- Toolbar located at the top of the panel
Edit and Resend button
- More TBD
I'm working on a mockup but here are some initial thoughts:
Could we hide the Cookies/Params/etc tabs if they're empty, or could this be confusing?
Paw is a great find! Nice example of Mac native patterns.
For copying, there are a couple things we could try:
- When selecting a row, Cmd/Ctrl-C should copy both name/value
- Double-clicking a name or value should select that whole string (currently the selection stops at any hypens, so for an example like this, it's hard to grab the whole name or value)
- Copy button that shows up on hover at the end of each row - maybe a bit much. Could be batched up with the info button which should be on the right side.
- Raw header sections could have an always visible copy button
Some little consistency issues that could be fixed:
- Accordion header text can currently be selected. Also, it has a blue background on hover.
States for pending request, streamed request/response
Curious about this, but need to learn more. What does this look like in other places?