Closed Bug 1590653 Opened 5 years ago Closed 2 years ago

Netmonitor - Learn more about Performance analysis button can be aligned with the Cache Headers

Categories

(DevTools :: Netmonitor, enhancement, P3)

enhancement

Tracking

(firefox-esr60 wontfix, firefox-esr68 wontfix, firefox70 wontfix, firefox71 wontfix, firefox72 wontfix, firefox105 fixed)

RESOLVED FIXED
105 Branch
Tracking Status
firefox-esr60 --- wontfix
firefox-esr68 --- wontfix
firefox70 --- wontfix
firefox71 --- wontfix
firefox72 --- wontfix
firefox105 --- fixed

People

(Reporter: cfogel, Assigned: danielqeli1)

References

(Blocks 1 open bug)

Details

(Keywords: good-first-bug)

Attachments

(5 files, 3 obsolete files)

Attached image netmonitor_PRIME.png

Affected versions

  • 72.0a1 (2019-10-22) , 70.0b3, 69.0.2, 68.1.0esr, 60.9.0esr;

Affected platforms

  • Windows 10, macOS 10.13, Ubuntu 18.04;

Steps to reproduce

  1. Launch Firefox, open DevTools - Netmonitor;
  2. Access any webpage;
  3. Click on the StopWatch from the bottom-left corner of the screen (Start Performance Analisys);

Enchancement suggestion

  • Learn more about Performance analysis button can be aligned with the Cache Headers

Actual result

  • (?) button appears lower than the Cache text line;

Regression range

  • not a regression, appears to be in the MDN mockups as is;
  • refference;

Additional notes

  • attached screenshot with the suggestion.
Has STR: --- → yes
Keywords: good-first-bug
Priority: -- → P3

@Florens, perhaps this could be easy to fix?
Honza

Flags: needinfo?(florens)

Looks doable. Things to fix:

  1. The icon is misaligned in the button itself
  2. Button is misaligned with regards to the title
Assignee: nobody → florens
Status: NEW → ASSIGNED
Flags: needinfo?(florens)

Result of the attached patch.

We were using a 24px icon scaled down to 16px, leaving us with a slightly too fat stroke for the circle, so tweaked the icon size and circle stroke to be more similar to e.g. the "info" icon in Console.

Also tweaked the MDN button to use a 20x20 total size, its vertical alignment in the searchbox, its vertical alignment in the Headers pane and in the Performance analysis pane.

One interesting win is that it does not make the "Status Code" line so much bigger now. (Ultimately I'd love to address the vertical rhythm and spacing in the Headers pane -- implementing Matt's design, probably -- but that's a different topic.)

This good-first-bug hasn't had any activity for 6 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Assignee: florens → nobody
Status: ASSIGNED → NEW

@Honza this seem quite easy i'd like to jump on it

Assigned to you, thank you for helping

Honza

Assignee: nobody → holaszyd1
Status: NEW → ASSIGNED
Whiteboard: dt-outreachy-2021
Attachment #9246545 - Attachment is obsolete: true
Attachment #9246541 - Attachment is obsolete: true
Attachment #9246516 - Attachment is obsolete: true

Submitted the patch for this. Needs reviewing

Flags: needinfo?(odvarko)

Bomsy is looking into this already. Removing NI

Flags: needinfo?(odvarko)

This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Assignee: holaszyd1 → nobody
Status: ASSIGNED → NEW

Looks doable, I'll take this one

Assignee: nobody → danielqeli1
Status: NEW → ASSIGNED
Whiteboard: dt-outreachy-2021
Pushed by hmanilla@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/7249cbd736d7
Fixed/improved alignment of "Learn more about performance" button with cache headers r=bomsy
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 105 Branch
You need to log in before you can comment on or make changes to this bug.