Netmonitor more minor css tweaks

RESOLVED FIXED in Firefox 65

Status

defect
P3
normal
RESOLVED FIXED
a year ago
6 months ago

People

(Reporter: Honza, Assigned: tanhengyeow)

Tracking

({regression})

unspecified
Firefox 65
Dependency tree / graph

Firefox Tracking Flags

(firefox-esr60 unaffected, firefox63 wontfix, firefox64 wontfix, firefox65 fixed)

Details

Attachments

(2 attachments, 1 obsolete attachment)

This is a follow up for bug 1458092

See also this comment:
https://bugzilla.mozilla.org/show_bug.cgi?id=1458092#c15

1) white on --grey-10-a20 would be a good selected item equivalent.
2) there's a bit too much spacing between "No throttling" and its dropdown icon - should ideally match the HAR dropdown.

Honza
Thanks Honza!

One related thing I forgot to think about:

The button states, on-click, should change to a distinct hover state. Currently it's a bit confusing because the hover state looks the same as the selected state. 

The hover state could be a half-as-strong background: --grey-90-a05 for light and --grey-10-a10 for dark. If this is still too similar to the selected state when we try it out, we could instead use no background + darkest/lightest font color.
Priority: -- → P3

Updated

10 months ago
Product: Firefox → DevTools
(Assignee)

Comment 2

6 months ago
More css tweaks for Netmonitor toolbar.
(Assignee)

Comment 3

6 months ago
(Assignee)

Comment 4

6 months ago
Hi :victoria

I've made some css tweaks to address the following (refer to attached image):
1. Dark theme: Selected filter buttons now have a background color of `--grey-10-a20` (specs taken from https://github.com/FirefoxUX/design-tokens/blob/master/photon-colors/photon-colors.css#L75)
2. Spacing between "No throttling" and the dropdown icon is now consistent with "HAR".

Let me know what you think :)

> The button states, on-click, should change to a distinct hover state. Currently it's a bit confusing because the hover state looks the same as the selected state. 

May I clarify if you are referring to the filter buttons or the "No throttling"/"HAR" buttons?
Flags: needinfo?(victoria)
@Lenka: can you please look at the attached patch? I think we need to sync it with the work you are doing in bug 1500018

Honza
Flags: needinfo?(lba_2)

Comment 6

6 months ago
(In reply to Jan Honza Odvarko [:Honza] need-info me from comment #5)
> @Lenka: can you please look at the attached patch? I think we need to sync
> it with the work you are doing in bug 1500018
> 
> Honza

Hi everybody,

just a quick recap:

1. in Bug 1458092 https://bugzilla.mozilla.org/show_bug.cgi?id=1458092 are introduced the changes in Toolbar.css (done by Victoria Wang)that change the background color of Filter buttons to grey (for light theme only).

2. in this bug Heng Yeow is working on the follow up on the bug above (for dark theme).

3. now, in Bug 1500018 https://bugzilla.mozilla.org/show_bug.cgi?id=1500018 I am working to restore the blue background on the selected Filter buttons. In the discussion (in bug 1500018) was suggested to use blue background to be in sync with Console filter buttons (this can be done by simply removing part of the formatting from Toolbar.css introduced in 1.) then the blue background is automatic.

However, I think someone should first make a call on what is the proper color to use. Maybe @Matt Croud? anyone else?

Thanks :-)
Lenka

p.s. also, I was thinking that in Toolbar.css we may rather use variable for color (as it is done in rest of the file)
Flags: needinfo?(lba_2) → needinfo?(mcroud)

Comment 7

6 months ago
Thank you for the recap Lenka,

In light mode, when selected the filter buttons should have a background of Blue 55 with #ffffff text color.
I think using variables is the way to go, rather than using color references directly.
Flags: needinfo?(mcroud)
I am marking this bug as blocked by bug 1500018.

It looks like Lenka is closed to landing bug 1500018, so it can happen first. 
Consequently we can fix/land this bug.

Honza
Assignee: nobody → E0032242
Status: NEW → ASSIGNED
Depends on: 1500018
Closing this as fixed in 65 from comment 8 and because bug 1500018 landed in nightly.
Status: ASSIGNED → RESOLVED
Last Resolved: 6 months ago
Resolution: --- → FIXED
AFAICT, bug 1500018 was only blocking this bug, not superseding it.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Sorry for the delay - closing my needinfo, looks like you all have it handled!
Flags: needinfo?(victoria)
(Assignee)

Comment 12

6 months ago
Spacing between "No throttling" and the dropdown icon is now consistent with "HAR"
(Assignee)

Updated

6 months ago
Attachment #9018880 - Attachment is obsolete: true
Attachment #9018880 - Attachment is obsolete: false
(Assignee)

Updated

6 months ago
Attachment #9018880 - Attachment is obsolete: true
(Assignee)

Comment 13

6 months ago
Hi :Honza

Since bug 1500018 is resolved, the only tweak left is to have consistent spacing between the "No throttling" button and the "HAR" button. My latest patch addresses that, please review :)

Refer to "netmonitor-css-tweak-1.png" for the visual representation :)
Flags: needinfo?(odvarko)

Comment 14

6 months ago
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/68e3e10e8003
Netmonitor more minor css tweaks. r=Honza
(In reply to Heng Yeow (:tanhengyeow) from comment #13)
> Hi :Honza
> 
> Since bug 1500018 is resolved, the only tweak left is to have consistent
> spacing between the "No throttling" button and the "HAR" button. My latest
> patch addresses that, please review :)
> 
> Refer to "netmonitor-css-tweak-1.png" for the visual representation :)
Thanks, landed!

Honza
Flags: needinfo?(odvarko)

Comment 16

6 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/68e3e10e8003
Status: REOPENED → RESOLVED
Last Resolved: 6 months ago6 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Is this worth backport consideration or can it ride the trains?
Flags: needinfo?(odvarko)
(In reply to Ryan VanderMeulen [:RyanVM] from comment #17)
> Is this worth backport consideration or can it ride the trains?
This is minor and can ride the trains (and I'd also like to give it more time to sit in Nightly)

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