Closed Bug 1458092 Opened 2 years ago Closed 2 years ago

Netmonitor - minor visual tweaks to new toolbar

Categories

(DevTools :: Netmonitor, enhancement, P1)

enhancement

Tracking

(firefox61 fixed)

RESOLVED FIXED
Firefox 61
Tracking Status
firefox61 --- fixed

People

(Reporter: victoria, Assigned: Honza)

References

Details

Attachments

(3 files, 1 obsolete file)

Attached image networktweaks.png
- Make the devtools-toolbar background color white. (Same as in the mockup https://mozilla.invisionapp.com/share/2XEEY0RYA#/screens/263401584_Network_Toolbar All panels will be moving to this style with the integrated search bar, and the white will give it a cleaner look. Console will need the same change, I can file a separate bug)

- Change margin of .requests-list-filter-buttons to `0 7px;` to give it more room

- Change .devtools-checkbox-label to lessen margin:
    margin-inline-start: 2px;
    margin-inline-end: 2px;

- Last .devtools-checkbox-label (Disable cache in this case) needs an extra margin-right: 7px;

HAR button would benefit from margin: 0 0 0 2px; for better spacing

I attached a screenshot that shows what the above style changes look like.

Two other changes:

- The filter input's focus ring should use the same rectangle style as Console

- Change the button styling to be as specified in this mockup
https://mozilla.invisionapp.com/share/2XEEY0RYA#/screens/263398480
Assignee: nobody → odvarko
Status: NEW → ASSIGNED
Priority: -- → P1
@Victoria: what exactly does it mean "Gray 90 10%" on the screenshot? (I am referring mainly to the percentage part)

I guess that Gray 90 equals to the existing `--grey-90` CSS variable, correct?

And the percentage means alpha?  

Like e.g. the following var should be defined for it?

--grey-90-alpha-10: rgba(12, 12, 13, 0.1);

Honza
Flags: needinfo?(victoria)
Ah yes, Gray 90 is --gray-90, and I did mean alpha by the percentage part.

The variable you mentioned could make sense if we follow the existing devtools pattern:

https://searchfox.org/mozilla-central/source/devtools/client/themes/variables.css#239

However, it might make sense to instead pull the color-with-alpha variables from the main design tokens project: 

https://github.com/FirefoxUX/design-tokens/blob/master/photon-colors/photon-colors.css#L75
Flags: needinfo?(victoria)
(In reply to Victoria Wang [:victoria] from comment #3)
> However, it might make sense to instead pull the color-with-alpha variables
> from the main design tokens project: 
Yes, agree.

Thanks!

Honza
Attached image net-photon-toolbar.png (obsolete) —
Attaching a screenshot of the current state.

Honza
Thanks Honza, this screenshot looks great!!

Two small tweaks - the left checkbox looks like it could use 2px more left margin, and looks like the dropdown icon on Throttle might need to be updated to match the HAR one's lighter color.
@Victoria: is there a mockup for the dark theme I should use?

Honza
Flags: needinfo?(victoria)
Attached image net-photon-toolbar2.png
I tested the patch on Win and OSX; both dark and light themes. Screenshot of what I am seeing is attached.

Honza
Attachment #8972521 - Attachment is obsolete: true
Comment on attachment 8972290 [details]
Bug 1458092 - Netmonitor - minor visual tweaks to new toolbar;

https://reviewboard.mozilla.org/r/240946/#review247554

Looks excellent!
Attachment #8972290 - Flags: review?(dwalsh) → review+
Thanks for the review David!
Honza
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1bf642a3af2a
Netmonitor - minor visual tweaks to new toolbar; r=davidwalsh
Thanks Honza, the screenshots look really good. 

Some comments (can be for a separate patch later):
I don't have a mockup for the dark theme, but just looked into this and I think white on --grey-10-a20 would be a good selected item equivalent. Could you give that a try?

One issue I noticed was that there's a bit too much spacing between "No throttling" and its dropdown icon - should ideally match the HAR dropdown. (I know that throttle dropdown has some weird custom stuff going on ^_^;)
Flags: needinfo?(victoria)
https://hg.mozilla.org/mozilla-central/rev/1bf642a3af2a
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
(In reply to Victoria Wang [:victoria] from comment #15)
> Thanks Honza, the screenshots look really good. 
> 
> Some comments (can be for a separate patch later):
> I don't have a mockup for the dark theme, but just looked into this and I
> think white on --grey-10-a20 would be a good selected item equivalent. Could
> you give that a try?
> 
> One issue I noticed was that there's a bit too much spacing between "No
> throttling" and its dropdown icon - should ideally match the HAR dropdown.
> (I know that throttle dropdown has some weird custom stuff going on ^_^;)
Thanks for the feedback Victoria!

I created a follow up for it: bug 1459539

Honza
Product: Firefox → DevTools
Depends on: 1459539
You need to log in before you can comment on or make changes to this bug.