Closed Bug 1631302 Opened 3 years ago Closed 3 years ago

UX refactor for the headers sections


(DevTools :: Netmonitor, enhancement, P2)



(firefox78 fixed)

Firefox 78
Tracking Status
firefox78 --- fixed


(Reporter: bomsy, Assigned: bomsy)



(Keywords: dev-doc-complete)


(1 file)

Refactor the Response and Request Headers
See UX Design

  • New smaller “Raw” toggle
  • New colors
    We shouldn’t use an input box for header values when selected. Let’s do what Chrome does.
  • Show learn more, copy, icons on hover

Not showing if there is a text selection?
Overlapping the text or not?
Only the warning icons is visible all the time
We don’t have warnings in MVP

Blocks: 1617167
Priority: -- → P2

Dropping related suggestions from @fvsh here

Some possible improvements to the Headers accordion:

  • In my tests, clicking the <label> element does not toggle the input, not sure why. Do we need an explicit for="input-id" attribute?
  • We can make the checkbox (toggle) element take up less space by resetting its margin to e.g.: margin: 0; margin-inline-start: 4px;
  • We can make the toggle smaller by setting its font-size to 12px instead of 16px, it looks like it renders well at this size and it fits Victoria's suggestion of smaller toggles in the header.

Included in this patch

  • Reduced the size of the raw header toggles from 16px to 12px
  • The raw header toggles when the "Raw" label is clicked
  • The label has changed for "Raw headers" to "Raw" as recommende by the UX designs
  • Changed the Title text color of the headers accordion to make it lighter
  • Disabled the input boxes when property values are selected
  • Changed the color of the property values

Todo (in a different patch)

  • Show learn more and copy icons on hover
  • No warning icons
Assignee: nobody → hmanilla
Pushed by
Quick UX refactor of the header sections r=Honza
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 78
Keywords: dev-doc-needed

I noticed that there are no longer info icons linking to MDN from the status codes. Is this intentional?

Are you sure? They are on the left side of each header, just as before. In the future, we want to show them only on hover though.

Flags: needinfo?(jswisher)

They're still there for the headers, but not for the status codes.
Compare Fx77:
with Fx78:
If it's there on hover, I haven't discovered what to hover over to get it.

Flags: needinfo?(jswisher)

I guess this observation more properly belongs in bug 1631295. Adding it there.

Updated screenshots for the Request headers and Response headers. Added description of the Raw toggle.

You need to log in before you can comment on or make changes to this bug.