[gtk/wip/exalm/menubutton] menubutton: Sync style classes with internal button

[Alexander Mikhaylenko <alexm src gnome org>]

commit e28685faac550de9b19d6cedf41431c4b3d6d43d
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Nov 11 14:13:54 2021 +0500

    menubutton: Sync style classes with internal button
    
    Make it easier to style the button: this way we get support for classes
    like .circular for free without needing to special case each of them.

 gtk/gtkmenubutton.c            | 32 ++++++++++++++++++++------------
 gtk/theme/Default/_common.scss |  1 -
 2 files changed, 20 insertions(+), 13 deletions(-)
---
diff --git a/gtk/gtkmenubutton.c b/gtk/gtkmenubutton.c
index 370956da85..521d960aea 100644
--- a/gtk/gtkmenubutton.c
+++ b/gtk/gtkmenubutton.c
@@ -57,28 +57,31 @@
  * # CSS nodes
  *
  * ```
- * menubutton
- * ╰── button.toggle
+ * menubutton.popup.toggle
+ * ╰── button.popup.toggle
  *     ╰── <content>
  *          ╰── [arrow]
  * ```
  *
- * `GtkMenuButton` has a single CSS node with name `menubutton`
- * which contains a `button` node with a `.toggle` style class.
+ * `GtkMenuButton` has a single CSS node with name `menubutton` with a `.popup`
+ * and a `.toggle` style classes.
  *
  * If the button contains an icon, it will have the `.image-button` style class,
  * if it contains text, it will have `.text-button` style class. If an arrow is
  * visible in addition to an icon, text or a custom child, it will also have
  * `.arrow-button` style class.
  *
+ * It has a `button` subnode, which has exactly same style classes as the
+ * `menubutton` node.
+ *
  * Inside the toggle button content, there is an `arrow` node for
  * the indicator, which will carry one of the `.none`, `.up`, `.down`,
  * `.left` or `.right` style classes to indicate the direction that
  * the menu will appear in. The CSS is expected to provide a suitable
  * image for each of these cases using the `-gtk-icon-source` property.
  *
- * Optionally, the `menubutton` node can carry the `.circular` style class
- * to request a round appearance.
+ * Optionally, the `menubutton` node can carry the same style classes as
+ * `GtkButton`, e.g. `.circular` to request a round appearance.
  *
  * # Accessibility
  *
@@ -608,19 +611,19 @@ update_style_classes (GtkMenuButton *menu_button)
   gboolean has_arrow = gtk_widget_get_visible (menu_button->arrow_widget);
 
   if (has_only_arrow || has_icon)
-    gtk_widget_add_css_class (menu_button->button, "image-button");
+    gtk_widget_add_css_class (GTK_WIDGET (menu_button), "image-button");
   else
-    gtk_widget_remove_css_class (menu_button->button, "image-button");
+    gtk_widget_remove_css_class (GTK_WIDGET (menu_button), "image-button");
 
   if (has_label)
-    gtk_widget_add_css_class (menu_button->button, "text-button");
+    gtk_widget_add_css_class (GTK_WIDGET (menu_button), "text-button");
   else
-    gtk_widget_remove_css_class (menu_button->button, "text-button");
+    gtk_widget_remove_css_class (GTK_WIDGET (menu_button), "text-button");
 
   if (has_arrow && !has_only_arrow)
-    gtk_widget_add_css_class (menu_button->button, "arrow-button");
+    gtk_widget_add_css_class (GTK_WIDGET (menu_button), "arrow-button");
   else
-    gtk_widget_remove_css_class (menu_button->button, "arrow-button");
+    gtk_widget_remove_css_class (GTK_WIDGET (menu_button), "arrow-button");
 }
 
 static void
@@ -669,11 +672,16 @@ gtk_menu_button_init (GtkMenuButton *self)
   gtk_widget_set_sensitive (self->button, FALSE);
 
   gtk_widget_add_css_class (GTK_WIDGET (self), "popup");
+  gtk_widget_add_css_class (GTK_WIDGET (self), "toggle");
 
   gtk_accessible_update_relation (GTK_ACCESSIBLE (self->button),
                                   GTK_ACCESSIBLE_RELATION_LABELLED_BY, self, NULL,
                                   GTK_ACCESSIBLE_RELATION_DESCRIBED_BY, self, NULL,
                                   -1);
+
+  g_object_bind_property (self, "css-classes",
+                          self->button, "css-classes",
+                          G_BINDING_SYNC_CREATE);
 }
 
 static GtkBuildableIface *parent_buildable_iface;
diff --git a/gtk/theme/Default/_common.scss b/gtk/theme/Default/_common.scss
index ebef2a800c..08b14e2b72 100644
--- a/gtk/theme/Default/_common.scss
+++ b/gtk/theme/Default/_common.scss
@@ -750,7 +750,6 @@ button {
 
   .linked.vertical > & { @extend %linked_vertical; }
 
-  menubutton.circular &,
   &.circular { // force circular button shape
     min-width: 32px;
     min-height: 32px;