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

With the current table there is some redundance, but only "some" as the columns are often squished so small that the information can't really be seen. When we get around to minimize the table's sidebar-open mode to a single column this should not be an issue though, right?

True, especially if only show the filename. But I wonder if we might want to keep the status/method in the table.

Pending requests will only have request parts (headers, payload, cookies, etc), but no response. Same for blocked requests btw. Streamed responses have some response parts and others are still coming in in chunks. There are also streamed requests, for multipart uploads; which have chunk request data in multiple parts.

I see - so, assuming we can differentiate whether some data is either missing or waiting, we could indicate that.

useful!

Related questions

No questions were found.
Github User Rank List