Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Starred by 10 users
Status: Started
Owner:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 3
Type: Feature

Blocked on:
issue 21438



Sign in to add a comment
Draw native GTK window navigation buttons on Linux
Project Member Reported by thomasanderson@chromium.org, Aug 7 Back to list
Now that we've switched to the GTK3 theme, we can utilize foreign drawing to paint the minimize, maximize/restore, and close buttons.
 
Cc: brajkumar@chromium.org
 Issue 732050  has been merged into this issue.
Cc: -brajkumar@chromium.org
Status: Started
X-reffing video for CL:
https://chromium-review.googlesource.com/c/604288
native_nav_demo.mp4
1.8 MB View Download
Project Member Comment 4 by bugdroid1@chromium.org, Aug 21
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/5c3130adf12999016a56c4f1ee3973386b1f9ed3

commit 5c3130adf12999016a56c4f1ee3973386b1f9ed3
Author: Tom Anderson <thomasanderson@chromium.org>
Date: Mon Aug 21 19:49:17 2017

Draw native GTK window nativation buttons on Linux

This CL is the initial implementation of GTK-rendered close, minimize,
and maximize buttons.  A demo can be seen at [1].  The implementation
is not ready to be released yet (still need to handle different scale
factors and button drawing for "backdrop" windows), so the feature is
guarded by a flag for now.

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=753067#c3

BUG=753067
R=sky@chromium.org,pkasting@chromium.org

Change-Id: Iadb5c96052f100097a10a5161aa3d9d44d89c901
Reviewed-on: https://chromium-review.googlesource.com/604288
Commit-Queue: Thomas Anderson <thomasanderson@chromium.org>
Reviewed-by: Scott Violet <sky@chromium.org>
Reviewed-by: Elliot Glaysher <erg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#496031}
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/about_flags.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/flag_descriptions.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/flag_descriptions.h
[add] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/frame_button_display_types.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/libgtkui/BUILD.gn
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/libgtkui/gtk_ui.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/libgtkui/gtk_ui.h
[add] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/libgtkui/nav_button_provider_gtk3.cc
[add] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/libgtkui/nav_button_provider_gtk3.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/browser_desktop_window_tree_host_x11.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/browser_desktop_window_tree_host_x11.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/browser_non_client_frame_view.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/browser_non_client_frame_view.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/opaque_browser_frame_view.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/opaque_browser_frame_view.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/opaque_browser_frame_view_layout.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/opaque_browser_frame_view_layout.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/opaque_browser_frame_view_layout_delegate.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/browser/ui/views/frame/opaque_browser_frame_view_layout_unittest.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/common/BUILD.gn
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/common/chrome_features.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/common/chrome_features.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/chrome/common/features.gni
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/tools/metrics/histograms/enums.xml
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/ui/views/BUILD.gn
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/ui/views/linux_ui/linux_ui.h
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/ui/views/widget/desktop_aura/desktop_window_tree_host_x11.cc
[modify] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/ui/views/widget/desktop_aura/desktop_window_tree_host_x11.h
[add] https://crrev.com/5c3130adf12999016a56c4f1ee3973386b1f9ed3/ui/views/window/nav_button_provider.h

You should respect the side of a window where buttons are displayed as
well.
Blockedon: 21438
Working on it in bug 21438.  We're not going to enable the feature from c#4 until that bug is fixed.
X-reffing video for CL https://chromium-review.googlesource.com/625240
native_nav_scale_factors.mp4
3.6 MB View Download
Project Member Comment 8 by bugdroid1@chromium.org, Aug 22
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/19eeb40db05f8d69285a05482fea11e04ab3c190

commit 19eeb40db05f8d69285a05482fea11e04ab3c190
Author: Tom Anderson <thomasanderson@chromium.org>
Date: Tue Aug 22 17:33:38 2017

Support arbitrary scale factors on GTK-rendered frame buttons

Please see the demo:
https://bugs.chromium.org/p/chromium/issues/detail?id=753067#c7

Note that the Chrome scale behavior differs slightly from the GTK
behavior: GTK does not support fractional scale factors, but Chrome
does.  As such, GTK never renders a frame button with eg. 1.5x scale.
However, since all parts of the Chrome UI (including the tabstrip
background) scale this way, we render the frame buttons at 1.5x scale
anyway.

BUG=753067
R=erg@chromium.org

Change-Id: Ief59d3626878d7a7da6f01b7aac2ca8dac802ab2
Reviewed-on: https://chromium-review.googlesource.com/625240
Reviewed-by: Elliot Glaysher <erg@chromium.org>
Commit-Queue: Thomas Anderson <thomasanderson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#496350}
[modify] https://crrev.com/19eeb40db05f8d69285a05482fea11e04ab3c190/chrome/browser/ui/libgtkui/nav_button_provider_gtk3.cc

X-reffing video for CL:
https://chromium-review.googlesource.com/c/chromium/src/+/626856
native_nav_activation.mp4
244 KB View Download
Comment 10 Deleted
Project Member Comment 11 by bugdroid1@chromium.org, Aug 22
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/27713d2c21f3edf4a51c815735c1dd5f6f516a25

commit 27713d2c21f3edf4a51c815735c1dd5f6f516a25
Author: Tom Anderson <thomasanderson@chromium.org>
Date: Tue Aug 22 23:10:06 2017

Support inactive-styled GTK frame buttons

Please see the demo:
https://bugs.chromium.org/p/chromium/issues/detail?id=753067#c9

BUG=753067
R=erg@chromium.org,sky@chromium.org

Change-Id: Idfc5d9a37f73b22c35339140ad858f4615849556
Reviewed-on: https://chromium-review.googlesource.com/626856
Reviewed-by: Scott Violet <sky@chromium.org>
Reviewed-by: Elliot Glaysher <erg@chromium.org>
Commit-Queue: Thomas Anderson <thomasanderson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#496492}
[modify] https://crrev.com/27713d2c21f3edf4a51c815735c1dd5f6f516a25/chrome/browser/ui/libgtkui/nav_button_provider_gtk3.cc
[modify] https://crrev.com/27713d2c21f3edf4a51c815735c1dd5f6f516a25/chrome/browser/ui/libgtkui/nav_button_provider_gtk3.h
[modify] https://crrev.com/27713d2c21f3edf4a51c815735c1dd5f6f516a25/chrome/browser/ui/views/frame/browser_non_client_frame_view.h
[modify] https://crrev.com/27713d2c21f3edf4a51c815735c1dd5f6f516a25/chrome/browser/ui/views/frame/opaque_browser_frame_view.cc
[modify] https://crrev.com/27713d2c21f3edf4a51c815735c1dd5f6f516a25/chrome/browser/ui/views/frame/opaque_browser_frame_view.h
[modify] https://crrev.com/27713d2c21f3edf4a51c815735c1dd5f6f516a25/chrome/browser/ui/views/frame/opaque_browser_frame_view_layout_unittest.cc
[modify] https://crrev.com/27713d2c21f3edf4a51c815735c1dd5f6f516a25/ui/views/window/nav_button_provider.h

Project Member Comment 12 by bugdroid1@chromium.org, Aug 25
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/845a562adecfbcf06ee7ac2686ec84830815d377

commit 845a562adecfbcf06ee7ac2686ec84830815d377
Author: Tom Anderson <thomasanderson@chromium.org>
Date: Fri Aug 25 00:45:32 2017

Gtk: Consider image sizing in frame button size calculation

This CL completes a TODO in nav_button_provider_gtk3.cc and in the
process fixes button sizing on some themes.

BUG=753067
R=erg@chromium.org

Change-Id: I52c3b51e02dbdcdb11695d3d9c96c493f06fd8d1
Reviewed-on: https://chromium-review.googlesource.com/634191
Reviewed-by: Elliot Glaysher <erg@chromium.org>
Commit-Queue: Thomas Anderson <thomasanderson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#497270}
[modify] https://crrev.com/845a562adecfbcf06ee7ac2686ec84830815d377/chrome/browser/ui/libgtkui/native_theme_gtk3.cc
[modify] https://crrev.com/845a562adecfbcf06ee7ac2686ec84830815d377/chrome/browser/ui/libgtkui/nav_button_provider_gtk3.cc

Project Member Comment 13 by bugdroid1@chromium.org, Aug 29
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/9fff344076c8ae00884c22ac8e5093c47d3b9fba

commit 9fff344076c8ae00884c22ac8e5093c47d3b9fba
Author: Tom Anderson <thomasanderson@chromium.org>
Date: Tue Aug 29 01:48:47 2017

Enable GTK native nav button drawing and layout on GTK3.14+

BUG=753067,21438
R=erg@chromium.org

Change-Id: I383b1e623b067033a0376d86cd7a758aba23d25b
Reviewed-on: https://chromium-review.googlesource.com/636039
Reviewed-by: Elliot Glaysher <erg@chromium.org>
Commit-Queue: Thomas Anderson <thomasanderson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#497981}
[modify] https://crrev.com/9fff344076c8ae00884c22ac8e5093c47d3b9fba/chrome/browser/ui/libgtkui/gtk_ui.cc
[modify] https://crrev.com/9fff344076c8ae00884c22ac8e5093c47d3b9fba/chrome/common/chrome_features.cc

Which version of Chromium will have this feature enabled by default? How can I enable this for now?
BTW consider add a margin-top/padding-top to the titlebar/tabs-bar(?) as you did it for macOS version.
c#14: Version 62 or later.  You can try it now with the google-chrome-unstable package
c#15: You mean change chrome in maximized mode to have spacing above the tabs?  That is unlikely to happen anytime soon
#C15 Ok, I understand. Thank you for response.
There is a bug in implementation. I have installed google-chrome-unstable and if window is maximized the buttons don't display. I have set the buttons on the left side of the window.




Screenshot from 2017-09-09 20-05-58.png
71.7 KB View Download
c#18 Does that happen in the stable channel as well?  If so, that's  bug 594490 
c#19 No. This is happen only in unstable channel.
Which theme and Gtk version are you using?
I am on Elementary OS Loki. Theme is Elementary I guess and gtk version is
3.18.9
Comment 23 Deleted
Does this issue only happen intermittently?  I was only able to get it to reproduce once, and I found that these steps consistently do it for me:
1. Have 2 monitors and 2 windows open, with a maximized chrome window on the left and an unmaximized one on the right
2. Fullscreen a video from the left window
3. Maximize the right window
4. Unfullscreen the video
Nope, it happens constantly to me. Every time I maximized the window
buttons are disappeared.
Did you try use other than ambiance gtk3 theme and then maximize the window?
c#26 I tested with Ambiance, Adwaita, and a handful of other themes.  I'm trying out Elementary OS now
Just tested and the issue is the same as  bug 594490 
But elementary doesn't use libunity.
Besides the issue occurs only in unstable channel of chrome. With stable
version 61 everything is ok.
c#29 Yes it does.  I tested manually removing libunity9 and it fixed the buttons in maximized mode.

Buttons in stable were fine, however.  Not sure why it became broken, but I tested disabling native title buttons and I still experienced the issue.  It's probably just a coincidence that it broke further at the same time as the switch to native title buttons.
Comment 32 Deleted
Comment 33 Deleted
It does work on Elementary, You need to enable "system-titlebar-and-borders".
Comment 36 Deleted
c#35
Take a look at the essence of this problem, please.


I have noticed one more issue. In maximized mode, Chromium does not care about buttons height and width that are defined by the gtk theme. Test please your solution with default GNOME gtk theme - Adwaita. Hover effect shows that buttons are much smaller than in other apps.
Do you mean like the video in c#3?  It scales down the buttons because there's not enough room for them to fit on the reduced tabstrip.

If you mean that the buttons should make the tabstrip larger, I don't think we'll do that.  I'd prefer to downsize the buttons than upsize the tabstrip.
It would be nice to have a little padding/margin before buttons.
Screenshot from 2017-10-09 21-11-22.png
8.1 KB View Download
c#39.  Not sure how I'd get that to work on all themes.  See the video in c#9.  All we're doing is matching the theme, so that's how it's supposed to look.  If you want to override it, you can add a user theme override like this:

headerbar.titlebar {
    padding-left: 10px;
    padding-right: 10px;
}
(I guess you meant ".header-bar.titlebar")
Yeah, it helped.. but.. What about nautilus/font viewer/and every other app that uses headerbar?

Is it the only way to make buttons equally spaced between window border and the first tab?

Yeah it's .header-bar on <Gtk3.20 and plain header-bar on >Gtk3.20.

You can choose Chrome specifically by adding the ".chromium" style class, so that it's ".header-bar.titlebar.chromium"
It appears the window controls don't scale correctly on Wayland (at 200% scaling, they're completely unusable)

Using Ubuntu 17.10 on a late 2015 macbook pro (Screen res is 2880x1800)

Attached a screenshot of chrome with default screen settings for my setup (Stock install)

Screenshot from 2017-10-11 07-14-05.png
133 KB View Download
Please do NOT remove native feature as i native buttons are much better for certain people.
Comment 45 by thomasanderson@chromium.org, Oct 19 (4 days ago)
c#43: Thanks, able to repro.  Hopefully we'll have a fix soon
Comment 46 by thomasanderson@chromium.org, Oct 19 (4 days ago)
X-reffing video for CL https://chromium-review.googlesource.com/c/chromium/src/+/703482
native_profile_chooser_demo.mp4
1.1 MB View Download
Project Member Comment 47 by bugdroid1@chromium.org, Oct 20 (2 days ago)
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/d69c71cf006a5baffc13c2da27b6a8fdc506ed47

commit d69c71cf006a5baffc13c2da27b6a8fdc506ed47
Author: Tom Anderson <thomasanderson@chromium.org>
Date: Fri Oct 20 18:21:54 2017

Gtk3: Fix frame button scaling on HIDPI

This CL fixes frame buttons being too small when GDK_SCALE=2, as seen
in [1].

[1] https://bugs.chromium.org/p/chromium/issues/detail?id=753067#c43

BUG=753067
R=erg@chromium.org

Change-Id: I835668b779ab10ab3da971960794093f37813141
Reviewed-on: https://chromium-review.googlesource.com/729568
Reviewed-by: Elliot Glaysher <erg@chromium.org>
Commit-Queue: Thomas Anderson <thomasanderson@chromium.org>
Cr-Commit-Position: refs/heads/master@{#510498}
[modify] https://crrev.com/d69c71cf006a5baffc13c2da27b6a8fdc506ed47/chrome/browser/ui/libgtkui/nav_button_provider_gtk3.cc

Comment 48 by frederik...@gmail.com, Yesterday (31 hours ago)
Will it be possible to remove that "border" around the chromium window with CSD activated?


Bildschirmfoto von »2017-10-21 20-25-35«.png
1.2 MB View Download
Comment 49 by thomasanderson@chromium.org, Yesterday (31 hours ago)
c#48 Yes it's possible.  It might take us a while to get to it, though
Sign in to add a comment