Polish Headers Side Panel

[janodvarko]

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: https://bugzilla.mozilla.org/show_bug.cgi?id=1613884

There are currently three expandable sections: 1) Response Headers 2) Request Headers 3) Request headers from upload stream

We could:

• Rename the third one to Request Payload
• Turn the general info at the top into an expandable section called General
• Move the Edit and Resend button to a new toolbar located at the top of the panel

WDYT? @digitarald @bomsy @fvsch

---

Open Questions

• 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:
  • Current:
    1. Summary, Headers (Request, Response)
    2. Cookies
    3. Params
    4. Response
    5. Stack Trace
    6. Security
  • Cleanup
    1. 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)
    4. …
• 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

Decisions

• Rename the third one to Request Payload
• Toolbar located at the top of the panel
  • Edit and Resend button
  • More TBD

[violasong]

One aspect to think about is long header names and how to align the values:

Ah, this screenshot is unfortunate; makes me think we should full-length wrap the values.

For super long URLs, an idea I just talked about with @nchevobbe regarding the Send Request Figma was limiting it to a certain number of rows (5?), and adding scroll overflow once it goes over.

[digitarald]

adding scroll overflow once it goes over.

line-clamp to the rescue.