1459539 - Netmonitor more minor css tweaks

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

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

Comment 1

[Victoria Wang [:victoria]]

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.

Comment 2

[Hengyeow (:tanhengyeow)]

Attachment: Bug 1459539 - Netmonitor more minor css tweaks. r=Honza

More css tweaks for Netmonitor toolbar.

Comment 3

[Hengyeow (:tanhengyeow)]

Attachment: netmonitor-css-tweak-1.png

Comment 4

[Hengyeow (:tanhengyeow)]

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?

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@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

Comment 6

[Lenka Pelechova]

(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)

Comment 7

[mcroud]

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.

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

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

Comment 9

[Liz Henry (:lizzard) (relman/hg->git project)]

Closing this as fixed in 65 from comment 8 and because bug 1500018 landed in nightly.

Comment 10

[Ryan VanderMeulen [:RyanVM]]

AFAICT, bug 1500018 was only blocking this bug, not superseding it.

Comment 11

[Victoria Wang [:victoria]]

Sorry for the delay - closing my needinfo, looks like you all have it handled!

Comment 12

[Hengyeow (:tanhengyeow)]

Attachment: Bug 1459539 - Netmonitor more minor css tweaks. r=Honza

Spacing between "No throttling" and the dropdown icon is now consistent with "HAR"

Comment 13

[Hengyeow (:tanhengyeow)]

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

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/68e3e10e8003
Netmonitor more minor css tweaks. r=Honza

Comment 15

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(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

Comment 16

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/68e3e10e8003

Comment 17

[Ryan VanderMeulen [:RyanVM]]

Is this worth backport consideration or can it ride the trains?

Comment 18

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(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