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

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) image
  • 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. image

States for pending request, streamed request/response

Curious about this, but need to learn more. What does this look like in other places?

useful!

Related questions

No questions were found.
Github User Rank List