Fix padding of dev tools network filters and make the bar thinner

Fix uneven padding of network filters in the dev tools.
Also makes the filter bar thinner.

Screenshots: https://imgur.com/a/CClua

BUG=606897
TEST=open network panel, padding for selected filter (XHR, JS, CSS)
should be even (see issue for screenshots)

[damienlog, 2016-06-29 15:06:28]

Description was changed from

==========
Fix uneven padding of network filters in the dev tools

BUG=606897
TEST=open network panel, padding for selected filter (XHR, JS, CSS)
should be even (see issue for screenshots)
==========

to

==========
Fix uneven padding of network filters in the dev tools

BUG=606897
TEST=open network panel, padding for selected filter (XHR, JS, CSS)
should be even (see issue for screenshots)
==========

[damienlog, 2016-06-29 15:06:28]

damienlog@gmail.com changed reviewers:
+ alph@chromium.org, chowse@chromium.org

[damienlog, 2016-07-01 13:17:36]

Fix uneven padding of network filters in the dev tools

BUG=606897
TEST=open network panel, padding for selected filter (XHR, JS, CSS)
should be even (see issue for screenshots)

[paulirish, 2016-07-07 22:19:45]

paulirish@chromium.org changed reviewers:
+ allada@chromium.org, paulirish@chromium.org
- alph@chromium.org

[paulirish, 2016-07-07 22:19:45]

I'd prefer to go with the more narrow padding, as these guys take up a good
amount of space.   How about `padding:3px` for all sides?

[damienlog, 2016-07-11 14:57:43]

On 2016/07/07 22:19:45, paulirish wrote:
> I'd prefer to go with the more narrow padding, as these guys take up a good
> amount of space.   How about `padding:3px` for all sides?

Thanks for the feedback, switched to 3px, I like tighly-packed interfaces too.

PS: I think it would look better with less border radius and a cursor on hover
but I want to keep the PR simple:

.filter-bitset-filter li {
    ...
    border-radius: 2px; // instead of 8px
    ...
    cursor: pointer;
}

And a thinner bar:

.filter-bar {
    ...
    padding: 2px 0; // instead of 4px
    ...
}

[allada, 2016-07-11 16:13:13]

I like it so far. Just a few things. If you decide to also change the other
padding value please update the title/description to reflect both changes.

Thanks!

(added luoe@ because it also affects console filters)

https://codereview.chromium.org/2105023004/diff/20001/AUTHORS
File AUTHORS (right):

https://codereview.chromium.org/2105023004/diff/20001/AUTHORS#newcode144
AUTHORS:144: Damien Marié <damien@dam.io>
Please put in alphabetical order.

https://codereview.chromium.org/2105023004/diff/20001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/filter.css (right):

https://codereview.chromium.org/2105023004/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/filter.css:33: padding: 4px 0
4px 0;
Lets change this to 2px as well. I like how it looks.

https://codereview.chromium.org/2105023004/diff/20001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/filter.css:69: border-radius:
8px;
I would disagree with changing this. I tested with different values and 8px I
think looks the best. If you want to challenge it, I will happily get chowse@ to
discuss it/decide; he is our UI/UX person.

[damienlog, 2016-07-11 16:42:27]

Thanks for the feedback.

On 2016/07/11 16:13:13, Blaise wrote:
> https://codereview.chromium.org/2105023004/diff/20001/AUTHORS#newcode144
> AUTHORS:144: Damien Marié <mailto:damien@dam.io>
> Please put in alphabetical order.
Done

>
https://codereview.chromium.org/2105023004/diff/20001/third_party/WebKit/Sour...
> third_party/WebKit/Source/devtools/front_end/ui/filter.css:33: padding: 4px 0
> 4px 0;
> Lets change this to 2px as well. I like how it looks.
Done

>
https://codereview.chromium.org/2105023004/diff/20001/third_party/WebKit/Sour...
> third_party/WebKit/Source/devtools/front_end/ui/filter.css:69: border-radius:
> 8px;
> I would disagree with changing this. I tested with different values and 8px I
> think looks the best. If you want to challenge it, I will happily get chowse@
to
> discuss it/decide; he is our UI/UX person.
Ok, let's keep it like that.

[damienlog, 2016-07-11 16:44:21]

Description was changed from

==========
Fix uneven padding of network filters in the dev tools

BUG=606897
TEST=open network panel, padding for selected filter (XHR, JS, CSS)
should be even (see issue for screenshots)
==========

to

==========
Fix uneven padding of network filters in the dev tools.
Also makes the filter bar thinner.

BUG=606897
TEST=open network panel, padding for selected filter (XHR, JS, CSS)
should be even (see issue for screenshots)
==========

[allada, 2016-07-11 18:40:26]

allada@chromium.org changed reviewers:
+ allada@google.com, lushnikov@chromium.org

[allada, 2016-07-11 18:40:26]

Also bringing in lushnikov@ for final ok

https://codereview.chromium.org/2105023004/diff/40001/AUTHORS
File AUTHORS (right):

https://codereview.chromium.org/2105023004/diff/40001/AUTHORS#newcode139
AUTHORS:139: Damien Marié <damien@dam.io>
nit: Still not in alphabetical order.

[lushnikov, 2016-07-11 19:02:21]

Thank you for the contribution!

We usually accompany UI changes with a screenshot to speed up review process.
Could you please make one and send a link as a comment to this issue?

[paulirish, 2016-07-11 22:03:16]

there are screenshots in
https://bugs.chromium.org/p/chromium/issues/detail?id=606897 , but not with the
new revised 3px padding.

[lushnikov, 2016-07-12 04:10:00]

lgtm

[paulirish, 2016-07-12 04:12:53]

The CQ bit was checked by paulirish@chromium.org

[commit-bot: I haz the power, 2016-07-12 04:13:35]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-07-12 04:13:37]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-07-12 04:13:38]

The author DamienLog@gmail.com has not signed Google Contributor License
Agreement. Please visit https://cla.developers.google.com to sign and manage
CLA.

[paulirish, 2016-07-12 04:14:34]

can you fix the alphabetical order. and sign the CLA?

also if you'd like to drop the border-radius down a tad, we'd be happy. :)

[damienlog, 2016-07-12 10:04:51]

On 2016/07/12 04:14:34, paulirish wrote:
> can you fix the alphabetical order. and sign the CLA?
> 
> also if you'd like to drop the border-radius down a tad, we'd be happy. :)

CLA signed, alphabetical order done (hopefully this time I got it right) and the
border-radius is down.

Here's screenshots of before/after: https://imgur.com/a/CClua

Thanks for the help everyone :)

[allada, 2016-07-12 15:25:49]

lgtm

[allada, 2016-07-12 15:26:42]

Description was changed from

==========
Fix uneven padding of network filters in the dev tools.
Also makes the filter bar thinner.

BUG=606897
TEST=open network panel, padding for selected filter (XHR, JS, CSS)
should be even (see issue for screenshots)
==========

to

==========
Fix uneven padding of network filters in the dev tools.
Also makes the filter bar thinner.

Screenshots: https://imgur.com/a/CClua

BUG=606897
TEST=open network panel, padding for selected filter (XHR, JS, CSS)
should be even (see issue for screenshots)
==========

[paulirish, 2016-07-12 15:45:54]

The CQ bit was checked by paulirish@chromium.org

[paulirish, 2016-07-12 15:45:54]

The patchset sent to the CQ was uploaded after l-g-t-m from
lushnikov@chromium.org
Link to the patchset: https://codereview.chromium.org/2105023004/#ps60001
(title: "fix authors ordering [again] and less border-radius")

[commit-bot: I haz the power, 2016-07-12 15:46:59]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-07-12 15:56:16]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-07-12 15:56:18]

Try jobs failed on following builders:
  chromium_presubmit on master.tryserver.chromium.linux (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/chromium_presub...)

[paulirish, 2016-07-12 16:06:51]

buildbot failure has this: 

> DamienLog@gmail.com is not in AUTHORS file. If you are a new contributor,
please visit
http://www.chromium.org/developers/contributing-code and read the "Legal"
section
If you are a chromite, verify the contributor signed the CLA.

So I think you want to adjust your authors file entry to that email. (I'm not
sure how to change the commit email to your dam.io, but that may be possible
too...)

[damien, 2016-07-12 16:51:34]

On 2016/07/12 16:06:51, paulirish wrote:
> So I think you want to adjust your authors file entry to that email. (I'm not
> sure how to change the commit email to your dam.io, but that may be possible
> too...)

Maybe it's possible to change the owner of the issue to this account ? (I signed
the CLA with this one too) If it's too complex, I can modify the AUTHORS file to
have "damienlog@gmail.com" instead.

[paulirish, 2016-07-12 17:05:22]

Hmm. 

I'm pretty sure the email that CQ is looking for is the email you have setup in
codereview here. (Your account on codereview.chromium.org). (nearly sure its not
your git commit author.)

It doesn't look possible to change the email, so you'd have to set up a new
codereview account and upload this patch again after authenticating to it.

So, up to you.

[damienlog, 2016-07-13 09:53:30]

Thanks for the advice, I'm closing this review and I've opened a new one:
https://codereview.chromium.org/2150503002/