aguscruiz commented 5 months ago

Description

Noticed some menu polish we can do. The following applies to the hamburger menu but also should apply to every menu in the browser that uses these components.

The goal is to match Chromium's menu styles more closely. In fact if we can take their sizing/paddings directly that'd be even better.

General menu

[ ] Update background colors to match design
[ ] Same with text colors and icon colors
[ ] Same with divider colors and hover/active states

Menu groups

[ ] The padding between the first-last items and it's container should be 8px. And needs to be standardized to all menu groups. In the hamburger some have 2px (passwords group), some have more (new tab group).
[ ] This applies to the main menu but also to submenues.
[ ] Exceptions: Sidebar menu item with options / Zoom menu item with options. Those two don't have padding.

Current

Design

Menu items

[x] Update height of the item to match chromium: 28px. Currently they're 24px.
[x] Left/right padding is 24px.
[x] This applies to simple items but also to the ones with inner buttons like Zoom.
[x] This applies to main menues but also sub menues.

Current

Design

Steps to reproduce

Open the hamburger menu or right click an item

Actual result

Expected result

Menu items with button controls

[ ] Normalize size in all to match design
[ ] Left padding should be 24px, right side padding is 16px

Actual result

Expected result

Reproduces how often

Easily reproduced

Brave version (brave://version info)

1.69.22 Chromium: 126.0.6478.71 (Official Build) nightly (arm64)

Channel information

[ ] release (stable)
[ ] beta
[X] nightly

Reproducibility

[ ] with Brave Shields disabled
[ ] with Brave Rewards disabled
[ ] in the latest version of Chrome

Miscellaneous information

No response

sangwoo108 commented 3 months ago

I'll do my best but it might not be possible to be perfect on this. There's no much room for customization in app menu.

aguscruiz commented 3 months ago

@sangwoo108 I'm taking my spacings and sizes as closely from chromium as I can, if that helps

sangwoo108 commented 3 months ago

There' was a PR for changing app menu's background color, but reverted due to bad side effects. Need to see if we have workaround for it

https://github.com/brave/brave-core/pull/23047/files

snvoid commented 1 month ago

Would the hamburger menu be changed (hopefully) to match more closely to chrome/chromium ? It would be nice if the bookmark button was also relocated as its currently not in a great spot, would be much better if contained within the address bar (omnibox) like the other chromium based browsers & firefox