Popover: Fix & add to CSS nodes documentation

* The `.background` class gets put on `popover`, not `content`
* Use backticks to style node and class names with monospace
* Link to GtkPopoverMenu
* Add to PopoverMenu a bit outlining how items and sections look in CSS.

diff --git a/gtk/gtkpopover.c b/gtk/gtkpopover.c
index 2532472877adc248378703749afed720896f0251..56935cf56dc43020f70513696f82ab1746e6bd66 100644 (file)
--- a/gtk/gtkpopover.c
+++ b/gtk/gtkpopover.c
@@ -70,30 +70,31 @@
  * # CSS nodes
  *
  * ```
- * popover[.menu]
+ * popover.background[.menu]
  * ├── arrow
- * ╰── contents.background
+ * ╰── contents
  *     ╰── <child>
  * ```
  *
- * The contents child node always gets the .background style class
- * and the popover itself gets the .menu style class if the popover
- * is menu-like (i.e. `GtkPopoverMenu`).
+ * `GtkPopover` has a main node with name `popover`, an arrow with name `arrow`,
+ * and another node for the content named `contents`. The `popover` node always
+ * gets the `.background` style class. It also gets the `.menu` style class
+ * if the popover is menu-like, e.g. is a [class@Gtk.PopoverMenu].
  *
  * Particular uses of `GtkPopover`, such as touch selection popups or
  * magnifiers in `GtkEntry` or `GtkTextView` get style classes like
- * .touch-selection or .magnifier to differentiate from plain popovers.
+ * `.touch-selection` or `.magnifier` to differentiate from plain popovers.
  *
- * When styling a popover directly, the popover node should usually
+ * When styling a popover directly, the `popover` node should usually
  * not have any background. The visible part of the popover can have
- * a shadow. To specify it in CSS, set the box-shadow of the contents node.
+ * a shadow. To specify it in CSS, set the box-shadow of the `contents` node.
  *
  * Note that, in order to accomplish appropriate arrow visuals, `GtkPopover`
- * uses custom drawing for the arrow node. This makes it possible for the
+ * uses custom drawing for the `arrow` node. This makes it possible for the
  * arrow to change its shape dynamically, but it also limits the possibilities
- * of styling it using CSS. In particular, the arrow gets drawn over the
- * content node's border and shadow, so they look like one shape, which
- * means that the border width of the content node and the arrow node should
+ * of styling it using CSS. In particular, the `arrow` gets drawn over the
+ * `content` node's border and shadow, so they look like one shape, which
+ * means that the border width of the `content` node and the `arrow` node should
  * be the same. The arrow also does not support any border shape other than
  * solid, no border-radius, only one border width (border-bottom-width is
  * used) and no box-shadow.

diff --git a/gtk/gtkpopovermenu.c b/gtk/gtkpopovermenu.c
index ed76b95fc72ecbf604c6928d16e74024bd542d5e..52951f65aa473dd34582f77dca2e0dab7a1b1d2e 100644 (file)
--- a/gtk/gtkpopovermenu.c
+++ b/gtk/gtkpopovermenu.c
@@ -135,7 +135,14 @@
  *
  * `GtkPopoverMenu` is just a subclass of `GtkPopover` that adds custom content
  * to it, therefore it has the same CSS nodes. It is one of the cases that add
- * a .menu style class to the popover's main node.
+ * a `.menu` style class to the main `popover` node.
+ *
+ * Menu items have nodes with name `button` and class `.model`. If a section
+ * display-hint is set, the section gets a node `box` with class `horizontal`
+ * plus a class with the same text as the display hint. Note that said box may
+ * not be the direct ancestor of the item `button`s. Thus, for example, to style
+ * items in an `inline-buttons` section, select `.inline-buttons button.model`.
+ * Other things that may be of interest to style in menus include `label` nodes.
  *
  * # Accessibility
  *