Closed Bug 1522845 Opened 5 years ago Closed 4 years ago

Headers panel UX tweaks and tidy ups

Categories

(DevTools :: Netmonitor, enhancement, P3)

Product:
DevTools
Component:
Netmonitor
Type:
enhancement

Tracking

(Not tracked)

Status:
RESOLVED DUPLICATE of bug 1617167

People

(Reporter: mcroud, Assigned: edrith, Mentored)

References

(Blocks 1 open bug)

Details

(Keywords: good-first-bug)

Attachments

(3 files)

Headers-review-1.png
768.01 KB, image/png
Details
Bug 1522845 - Headers panel UX tweaks and tidy ups
47 bytes, text/x-phabricator-request
Details | Review
image.png
47.55 KB, image/png
Details
Attached image Headers-review-1.png —

Awesome seeing the new Headers panel in Nightly.
I’ve had a play of the new interface and have provided a little list of tweaks and tidy ups to ensure we’re inline with Photon.
Please find attached a picture which illustrates the points below;

  1. The (?) icon within a blue selected row should turn white, Similar to the behaviour of icons in the Debugger Sources pane. I think there might be a little change in how the hover states look in the near future but I need to open that discussion up for other people first, so let’s stick with the white icons for now :)
  2. The toggle “enabled” state should be blue, ideally exactly how it looks in the Fonts pane of the Inspector.
  3. I found a bit of inconsistent behaviour when hovering over the Response and Request headers title bars. Sometime It would provide a light blue hover state, other times it would not. I couldn’t work out what the criteria was for when it did not work. It would be great if it always provided a hover state and in keeping with recent discussion, the hover background color should be Grey-20, not the light blue of old.
  4. In keeping with recent decisions on pane padding and measurements I have provided here some updated spacing measurements.
  5. A tiny nit-pick this one, when I toggle the Raw headers toggle and return back to the non-raw version, the window receives a dotted line which remains unless I have a row selected.
  6. The Raw headers toggle should only be activated when clicking on the toggle itself or the label, clicking anywhere else in the header should collapse or expand the pane.

Thanks again! Any questions just shout!

Thanks for the report and great mockups Matt!

Honza

Mentor: odvarko
Keywords: good-first-bug
Priority: -- → P3

Hello, I am new to contributing and would be interested in picking this up.

Hi! I would love to pick up these UX bugs if they're still available.

Hi. I am a new user here and would like to take up this good first issue if it is available.

Hi Steven

Are you still interested in this bug? :)

Honza, there's some people asking to work on this bug so would be good to assign them :)

Flags: needinfo?(odvarko)
Flags: needinfo?(edrith)

(In reply to Heng Yeow (:tanhengyeow) from comment #5)

Hi Steven

Are you still interested in this bug? :)

Honza, there's some people asking to work on this bug so would be good to assign them :)

I still am! Thank you, I wasnt sure if I should post again to say I was still interested.

Flags: needinfo?(edrith)

(In reply to Steven Killoran from comment #6)

I still am! Thank you, I wasnt sure if I should post again to say I was still interested.

Thanks for the update, assigned to you.

Honza

Assignee: nobody → edrith
Status: NEW → ASSIGNED
Flags: needinfo?(odvarko)

The changes here include:

  • White ? when a network detail row is selected.
  • Adjusted Raw headers toggle to be blue-55 consistently when toggled.
  • The Response and Request header title bars are consistent grey-20 instead of the light blue when hovered.
  • Adjusted margin and padding values for detail summary container.
  • Disabled dotted outline in Response and Request containers when focused and Raw headers were unchecked.
  • Adjusted the Raw headers toggle to be only activated when clicking the toggle itself or the label, and clicking anywhere else in the header collapses/expands the pane.
Attached image image.png —

(In reply to Steven Killoran from comment #8)

Thanks for the patch!

The changes here include:

  • White ? when a network detail row is selected.

This looks good

  • Adjusted Raw headers toggle to be blue-55 consistently when toggled.

This should use the same colors as the Inspector (see the attached screenshot). There are two 'Italic' toggles (taken from the Inspector panel). They have different colors depending whether they are focused or not.

  • The Response and Request header title bars are consistent grey-20 instead of the light blue when hovered.

This looks good

  • Adjusted margin and padding values for detail summary container.

Looks good

  • Disabled dotted outline in Response and Request containers when focused and Raw headers were unchecked.

Looks good

  • Adjusted the Raw headers toggle to be only activated when clicking the toggle itself or the label, and clicking anywhere else in the header collapses/expands the pane.

Looks good

Some more comments (see numbers on my screenshot)

  1. The filter bar get smaller height, it shouldn't change
  2. The toggle seem to overlap the bottom border of the title section. Also height of the toggle isn't the same as in the Inspector (see the Italic toggle at the screenshot)
  3. Lable in the title section isn't vertically centered and inline with the toggle label.

Could those be fixed too?

Honza

I'll get started on those.

Hi Steven. Just a quick check if you are still intending to work on this bug. If so, great, no pressure, take your time.
I prefer to ask in case you do not have time anymore to work on this. In which case we can make this bug unassigned again so other people can pick it up.

Flags: needinfo?(edrith)

(In reply to Patrick Brosset <:pbro> from comment #11)

Hi Steven. Just a quick check if you are still intending to work on this bug. If so, great, no pressure, take your time.
I prefer to ask in case you do not have time anymore to work on this. In which case we can make this bug unassigned again so other people can pick it up.
Sorry, I am still working on them, I just got hit with some stuff at school and this moved to the back burner. Just wrapping up a few large assignments and I can finish this up for you. Sorry for the delay.

Flags: needinfo?(edrith)

No problem, take your time. And thanks for getting back to me.

(In reply to Steven Killoran from comment #12)

(In reply to Patrick Brosset <:pbro> from comment #11)

Hi Steven. Just a quick check if you are still intending to work on this bug. If so, great, no pressure, take your time.
I prefer to ask in case you do not have time anymore to work on this. In which case we can make this bug unassigned again so other people can pick it up.
Sorry, I am still working on them, I just got hit with some stuff at school and this moved to the back burner. Just wrapping up a few large assignments and I can finish this up for you. Sorry for the delay.

Hi Steven,

Are you still interested in this bug? If not, I would like to help push it across the finish line.

Thanks!

Flags: needinfo?(edrith)

(In reply to lloan alas:[lloanalas] from comment #14)

(In reply to Steven Killoran from comment #12)

(In reply to Patrick Brosset <:pbro> from comment #11)

Hi Steven. Just a quick check if you are still intending to work on this bug. If so, great, no pressure, take your time.
I prefer to ask in case you do not have time anymore to work on this. In which case we can make this bug unassigned again so other people can pick it up.
Sorry, I am still working on them, I just got hit with some stuff at school and this moved to the back burner. Just wrapping up a few large assignments and I can finish this up for you. Sorry for the delay.

Hi Steven,

Are you still interested in this bug? If not, I would like to help push it across the finish line.

Thanks!

Having trouble updating the mozilla-source, so i'm resorting to redownloading on a different pc.
I'm having trouble with windows enviroments. I do want to finish this, sorry i've taken so long.

Flags: needinfo?(edrith)

(In reply to Steven Killoran from comment #15)

(In reply to lloan alas:[lloanalas] from comment #14)

(In reply to Steven Killoran from comment #12)

(In reply to Patrick Brosset <:pbro> from comment #11)

Hi Steven. Just a quick check if you are still intending to work on this bug. If so, great, no pressure, take your time.
I prefer to ask in case you do not have time anymore to work on this. In which case we can make this bug unassigned again so other people can pick it up.
Sorry, I am still working on them, I just got hit with some stuff at school and this moved to the back burner. Just wrapping up a few large assignments and I can finish this up for you. Sorry for the delay.

Hi Steven,

Are you still interested in this bug? If not, I would like to help push it across the finish line.

Thanks!

Having trouble updating the mozilla-source, so i'm resorting to redownloading on a different pc.
I'm having trouble with windows enviroments. I do want to finish this, sorry i've taken so long.

Hi Steven!

No worries, let me know if you need help setting up your environment on Windows. You can find me on Slack @lloan.

Thanks for replying!

Hi Steven. Sorry for asking again but it's been a few months. Are you still planning on investigating this bug?

Flags: needinfo?(edrith)

(In reply to Patrick Brosset <:pbro> from comment #17)

Hi Steven. Sorry for asking again but it's been a few months. Are you still planning on investigating this bug?

Again sorry. I am stuck on number 2, The other two are all finished, but I am having trouble with the tables.
In the first fix we changed the size of the first part of the table to take up most of the bar. But that caused the second half to get pushed out of the box or something.
When i modify the left box to be the 85% the right box gets pushed all the way to the left of the entire bar.

Do you know a better way to approach this?

Flags: needinfo?(edrith)

Let me needinfo Honza so he can help you with this.

Flags: needinfo?(odvarko)

Hubert should we close this as dup of the work you do on the Headers panel. Or you want to keep this open?

Honza

Flags: needinfo?(hmanilla)

I think we can close this as some of the design are changing anyways.

Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Flags: needinfo?(hmanilla)
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: