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

Mockup with:

  • Harald's last suggestion for error message. This de-emphasizes the error and makes it more a part of the summary rather than an extra section. Sounds like that's what we want?
  • A more typically-sized URL with no params, shown in the style of the query param examples
  • Smaller toggle for switching to raw

image

useful!

Related questions

No questions were found.
Github User Rank List