Created attachment 252259 [details] [review]
mutter: sync with headerbars

- don't paint button backgrounds at all.

Created attachment 252265 [details] [review]
mutter: bring titlebar metrics closer to headerbar

- increase padding
- create a separator (not button reorder firendly for now :( )

Created attachment 252282 [details] [review]
mutter: sync with headerbars

- don't paint button backgrounds at all.
- increase padding

Reworked the patches to be cleaner markup and work across all buttons, not just close. Discussed with Allan and dropped the separator and made the icons lighter.

Created attachment 252288 [details] [review]
mutter: sync with headerbars

- don't paint button backgrounds at all.
- increase padding

Fixed up a hover state, made sure it works for dark theme and synced the icon color with title.

Created attachment 252291 [details] [review]
titlebars: lighten up

- allan suggested having icons and titles in sync,
  but making them lighter.

Created attachment 252292 [details] [review]
mutter: sync with headerbars

- don't paint button backgrounds at all.
- increase padding

Jakub, can you create the same appearance for csd titlebars and buttons ?

Thats the CSD section in themes/Adwaita/gtk-3/gtk-widgets.css

To test, run GTK_CSD=1 gtk3-demo

I didn't realize you already made effort to bring those buttons close to the former styling. Attaching a patch to bring headerbar back to this new style again. As with the WM, the separator is missing as I bet that shouldn't be part of the "wm" button, but a toolbar separator. 

I'd like to test this with a larger headerbar with actual button inside though. Do we have a test app for that?

Created attachment 252333 [details] [review]
headerbar: bring inline with wm theme

- use the same close button styling.
- lower the border-radius to match wm and top bar
- don't use a separator here for now

Created attachment 252335 [details] [review]
mutter: sync with headerbars

- don't paint button backgrounds at all.
- increase padding

Created attachment 252336 [details] [review]
headerbar: bring inline with wm theme

- use the same close button styling.
- lower the border-radius to match wm and top bar
- don't use a separator here for now

The updated patch uses a lighter prelight and fixes :backdrop color. One thing that I haven't figured out is a change of dimensions for :backdrop. The CSD window jumps a bit when unfocused. :(

Created attachment 252420 [details] [review]
headerbar: bring inline with wm theme

- use button-like hover and active states for "wm buttons".
- lower the border-radius to match wm and top bar
- don't use a separator here for now

this would be the current raised button like behavior for :hover and :active. The jumpiness of :backdrop is still there :/

Cosimo, can you track down the size change that we're seeing here ?

Created attachment 252469 [details] [review]
mutter: sync with headerbars

- use regular raised button style for wm.

Attachment 252291 [details] pushed as f06c087 - titlebars: lighten up
Attachment 252420 [details] pushed as 947b274 - headerbar: bring inline with wm theme
Attachment 252469 [details] pushed as 5866f09 - mutter: sync with headerbars

Pushed a fix to git master now for the close button jumping around on hover and backdrop.

Hi,

I like how the new window title bar close button looks, it is much cleaner then it was in 3.8 with the backdrop.

But do we really need to make the window title bar this high ?

AFAIK the whole idea behind the header-bar is to combine useful controls and the title-bar into one to save vertical space. But with the new Adwaita mutter theme changes, we're doing anything but saving height for windows which use a standard mutter window title bar. The title_vertical_pad property has been increased from 9 to 16 as part of these changes, making the title bar absolutely huge!

The close button can be kept the same, both style and size wise, without increasing title_vertical_pad by setting D_icons_shrink to a lower value. Restoring D_icons_shrink in the mutter theme to 1 as it was before these patches, and changing title_vertical_pad to 8 ( 7 for maximized windows), results in a close icon with identical size to the one in the header bar, without using an (IMHO) too heigh title bar.

Note that the too heigh title-bar is an already often heard complaint about 3.8 and below, so making it even higher really seems like a bad idea. I was never really bothered by the height in 3.8, but in 3.10 it bothered even me enough to go looking for the cause and a possible fix.

Just try a google for "gnome 3 window titlebar height" to see a long list of forum posts / howto-s on how to decrease the title-bar height, and then consider this is for the 3.8 theme, which is significantly lower then what 3.10 uses right now.

Regards,

Hans

Hi Hans. Thank you for reiterating the height constraint. It is not an unimportant weight in the final design. With the defaults, the increase of 7 pixels in height for non-gnome/legacy apps might be too harsh. There's likely ways how to shave some pixels off, without making the close button a smaller target and diverging form the headerbar design in terms of margins. 

I wouldn't consider it a showstopper for 3.10 though.

Cosimo, could you reopen this? Turns out I don't have permission.

Created attachment 253123 [details] [review]
mutter: make titlebars less tall.

- more inline with the height of 3.8
- at the expense of consistency with headerbars

The above patch probably fully pleases Hans, but it goes against what this bug is about and creates a separation between titlebars and CSD/headerbars.

Created attachment 253124 [details] [review]
mutter: make titlebars less tall.

Created attachment 253125 [details] [review]
mutter: make titlebars less tall.

This one's as far as I can push it towards compactness.

I've tried the latest patch but it seems to have inconsistent results - gedit comes up with the original size, nautilus with 32px tall buttons and the gimp with 33px. :/