Closed Bug 1639751 Opened 8 months ago Closed 8 months ago

General section of the headers panel — polish

Categories

(DevTools :: Netmonitor, enhancement, P2)

enhancement

Tracking

(firefox78 fixed)

RESOLVED FIXED
Firefox 78
Tracking Status
firefox78 --- fixed

People

(Reporter: victoria, Assigned: bomsy)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Saw this appear in Nightly — it's looking great!

Some polish items: (I know this is a lot 😅 some of these things weren't in the mockup for this UI)

  • Background for the whole section should be white
  • Font size should be 12px (this is a change we're making for all of the Network panel)
  • Let's make the method clickable for expanding so that it's not just the arrow
  • As discussed in chat, we can change the Referrer to Referrer Policy (and make that first column a bit larger)
  • Ah, I forgot to add this to all the mockups, but Harald and I were talking about moving Address into the Query section. Could we put it at the end? (see this mockup)
  • Sometimes when clicking in the expanded URL section, the dotted focus ring appears - would be great to remove that.
  • The Status code should be using the non-monospace font, and doesn't need the extra spacing between 200 and OK

Alignment: (These CSS suggestions are just what I quickly did in browser toolbox to get the the look I wanted, so the exact CSS might be better done differently :))

  • Could we remove the 1px padding from .network-monitor .tabpanel-summary-container?
  • Spacing for element .network-monitor .headers-overview .summary works better: padding: 6px 16px 2px;
  • To line up the top part, we can change .treeTable .treeRow .treeIcon to have margin-inline: 0 1px; and change .url-preview to padding: 6px 3px;
  • Change .url-preview .horizontal-splitter to have margin: 6px 0px 6px 16px
  • The key-value pairs need 3px more vertical spacing between them, and there should also be 3px more space below the method when in expanded mode

This mockup should reflect all the latest changes.

Let me know if you have any questions!

Blocks: 1631295

Great summary, thanks for the report Victoria!

I am marking as P2 as it would be great to have this yet in 78 (if feasible)
(78 Soft freeze is next week Thursday)

Honza

Severity: -- → S3
Priority: -- → P2
Assignee: nobody → hmanilla

Hey Victoria,
I've started working on this
Just a couple of clarifications?

  • Ah, I forgot to add this to all the mockups, but Harald and I were talking about moving Address into the Query section. Could we put it at the end? (see this mockup)

Wondering about the address having its own sub section? Would it work, if its put in the top section? Or was there a reason it has its own sub-section?

  • The Status code should be using the non-monospace font, and doesn't need the extra spacing between 200 and OK

Does this mean no spacing between both? In the mock it seems to have the extra space.

Thanks

Flags: needinfo?(victoria)

Update with polish recommendations
Fixed failing tests

Hi Bomsy!

Wondering about the address having its own sub section? Would it work, if its put in the top section? Or was there a reason it has its own sub-section?

(Btw, this is the mockup I meant to link to in that comment)

The address seemed separate from the other sections because it's not part of the URL, while all the rest of the sections are (and one might try to read the URL from top to bottom). However, I see how the top section could make sense in terms of grouping, and it would be nice to cut down on sections. The address is basically the same as the top level domain name, correct? CCing Harald in case he has thoughts.

Does this mean no spacing between both? In the mock it seems to have the extra space.

Oh whoops - I meant there should just be a single space :)

Flags: needinfo?(victoria) → needinfo?(hkirschner)
Status: NEW → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 78
Duplicate of this bug: 1639708

(Resolved off-channel)

Flags: needinfo?(hkirschner)
You need to log in before you can comment on or make changes to this bug.