profile
viewpoint

Ask questionsPolish Headers Side Panel

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

image

<hr>

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
firefox-devtools/ux

Answer questions violasong

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

Some questions about this:

  • What do you mean by "Link to Request tab"? (Different from the Request Headers section?)
  • Should we also have a link to Cookies when it isn't a blocked request?
  • Do we still want to show Address?

At first I was thinking of a menu-like UI like this

image

But the sections that these would link to don't seem obviously connected to me. It might be better to name them, e.g.

image

useful!

Related questions

No questions were found.
Github User Rank List