1331165 - request-menu-filter-buttons should be a little bigger and easier to click

Status: NEW

(DevTools :: Netmonitor, defect, P3)

Description

[[:Towkir] Ahmed]

Attachment: tiny-requets-menu-filter-buttons.gif

Comment 1

[[:Towkir] Ahmed]

Attachment: requets-menu-filter-buttons_with_patch.gif

Some changes to this rule: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/common.css#494 could make this a lot more nice looking and easier to click.

Here are the changes:
padding: 3px 8px;
margin: 1px;

and the result attached

Comment 2

[[:Towkir] Ahmed]

If you agree on this, I can submit a patch

Comment 3

[Tim Nguyen :ntim]

I suspect this will make the toolbar bigger on Windows. Can you test this there as well ?

Comment 4

[[:Towkir] Ahmed]

(In reply to Tim Nguyen :ntim from comment #3)
> I suspect this will make the toolbar bigger on Windows.
You are right,
I already tested on windows today. But it seems like windows has already a look like my second attachment here: https://bug1331165.bmoattachments.org/attachment.cgi?id=8826828

Comment 5

[[:Towkir] Ahmed]

What do you suggest here Tim?

Comment 6

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

It's ok for me to do it a little bigger, but I think that we should be consistent with (at least) the Console panel or DOM panel. The Console panel has also a set of filter button and the size/style should be the same. The DOM panel has one 'Refresh' button. They should all use the same CSS.

Honza

Comment 7

[Tim Nguyen :ntim]

(In reply to [:Towkir] Ahmed from comment #5)
> What do you suggest here Tim?

The proper fix would be different for each of the places Honza mentioned, because we don't have a strong CSS framework.

Console: Apply display: flex; to .devtools-toolbar.webconsole-filterbar-secondary

Network monitor: Remove line at [0] (align-items: center)

DOM Panel: It's enough work I've filed another bug for it: bug 1331446

The CSS would probably require lots of refactoring before we can share anything here.

[0]: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/netmonitor.css#22

Comment 8

[Tim Nguyen :ntim]

For the console part: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/webconsole.css#708