1569044 - Network: When toolbar is wrapped onto two rows, the second row should have a white background

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P3)

Description

[Victoria Wang [:victoria]]

Attachment: image.png

When DevTools is narrow, I noticed that Network's bottom toolbar (with the filter icons) has a light gray background. We should change that to a white background so that the filter button colors are more visible, and to provide more distinction between the toolbars and the rest of the UI.

Comment 1

[Florens Verschelde :fvsch]

Structure seems to be:

<span id="netmonitor-toolbar-container">
  <span class="devtools-toolbar devtools-input-toolbar">…</span>
  <span class="devtools-toolbar">…</span>
</span>

Using the devtools-input-toolbar on the second row seems to work well. That class has a couple extra styles on top of the background-color, but it doesn't seem to conflict.

Comment 2

[Sonia Singla :soniasingla]

Victoria, I would like to work on this :)

Thanks
Sonia

Comment 3

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

Great, thanks for the help.
Honza

Comment 4

[Sonia Singla :soniasingla]

Attachment: Bug 1569044 - Change background colour. r=Honza!

When toolbar is wrapped onto two rows, the second row to have white background, class devtools-input-toolbar is being added up
onto devtools-toolbar devtools-input-toolbar

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/62f60c3fd995
Change background colour. r=Honza

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/62f60c3fd995