- 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

@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

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

(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

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

I tested the patch on Win and OSX; both dark and light themes. Screenshot of what I am seeing is attached. Honza

Comment on attachment 8972290 [details] Bug 1458092 - Netmonitor - minor visual tweaks to new toolbar; https://reviewboard.mozilla.org/r/240946/#review247554 Looks excellent!

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 ^_^;)

(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