A checklist for widgets

When porting your widgets to use GtkStyleContext, this checklist might be useful.

  1. Replace “style-set” handlers with “style-updated” handlers.
  2. Try to identify the role of what you're rendering with any number of classes. This will replace the detail string. There is a predefined set of CSS classes which you can reuse where appropriate. Doing so will give you theming 'for free', whereas custom classes will require extra work in the theme. Note that complex widgets are likely to need different styles when rendering different parts, and style classes are one way to achieve this. This could result in code like the following (simplified) examples:

    Example 46. Setting a permanent CSS class

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static void
    gtk_button_init (GtkButton *button)
    {
      GtkStyleContext *context;
    
      ...
    
      context = gtk_widget_get_style_context (GTK_WIDGET (button));
    
      /* Set the "button" class */
      gtk_style_context_add_class (context, GTK_STYLE_CLASS_BUTTON);
    }

    Or

    Example 47. Using dynamic CSS classes for different elements

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    static gboolean
    gtk_spin_button_draw (GtkSpinButton *spin,
                          cairo_t       *cr)
    {
      GtkStyleContext *context;
    
      ...
    
      context = gtk_widget_get_style_context (GTK_WIDGET (spin));
    
      gtk_style_context_save (context);
      gtk_style_context_add_class (context, GTK_STYLE_CLASS_ENTRY);
    
      /* Call to entry draw impl with "entry" class */
      parent_class->draw (spin, cr);
    
      gtk_style_context_restore (context);
      gtk_style_context_save (context);
    
      /* Render up/down buttons with the "button" class */
      gtk_style_context_add_class (context, GTK_STYLE_CLASS_BUTTON);
      draw_up_button (spin, cr);
      draw_down_button (spin, cr);
    
      gtk_style_context_restore (context);
    
      ...
    }

    Note that GtkStyleContext only provides fg/bg colors, so text/base is done through distinctive theming of the different classes. For example, an entry would usually be black on white while a button would usually be black on light grey.

  3. Replace all gtk_paint_*() calls with corresponding gtk_render_*() calls.

    The most distinctive changes are the use of GtkStateFlags to represent the widget state and the lack of GtkShadowType. Note that widget state is now passed implicitly via the context, so to render in a certain state, you have to temporarily set the state on the context, as in the following example:

    Example 48. Rendering with a specific state

    1
    2
    3
    4
    gtk_style_context_save (context);
    gtk_style_context_set_state (context, GTK_STATE_FLAG_ACTIVE);
    gtk_render_check (context, cr, x, y, width, height);
    gtk_style_context_restore (context);

    For gtk_render_check() and gtk_render_option(), the shadow_type parameter is replaced by the GTK_STATE_FLAG_ACTIVE and GTK_STATE_FLAG_INCONSISTENT state flags. For things such as pressed/unpressed button states, GTK_STATE_FLAG_ACTIVE is used, and the CSS may style normal/active states differently to render outset/inset borders, respectively.

  4. The various gtk_widget_modify_*() functions to override colors or fonts for individual widgets have been replaced by similar gtk_widget_override_*() functions.
  5. It is no longer necessary to call gtk_widget_style_attach(), gtk_style_attach(), gtk_style_detach() or gtk_widget_ensure_style().
  6. Replace all uses of xthickness/ythickness. GtkStyleContext uses the CSS box model, and there are border-width/padding/margin properties to replace the different applications of X and Y thickness. Note that all of this is merely a guideline. Widgets may choose to follow it or not.