1631302 - UX refactor for the headers sections

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P2)

Description

[Hubert Boma Manilla (:bomsy)]

Refactor the Response and Request Headers
See UX Design
https://www.figma.com/file/rTeLZ1cmvHbgfJt91AloNi/DevTools-Network-Details-Pane-(V)?node-id=171%3A93

• 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

Questions:
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

Comment 1

[Hubert Boma Manilla (:bomsy)]

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.

Comment 2

[Hubert Boma Manilla (:bomsy)]

Attachment: Bug 1631302 - Quick UX refactor of the header sections r=honza

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

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2082bf0cc795
Quick UX refactor of the header sections r=Honza

Comment 4

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/2082bf0cc795

Comment 5

[Janet Swisher]

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

Comment 6

[:Harald Kirschner :digitarald]

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.

Comment 7

[Janet Swisher]

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

Comment 8

[Janet Swisher]

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

Comment 9

[Janet Swisher]

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