[gtk/matthiasc/for-master] inspector: Add a dark background to the recorder

[Matthias Clasen <matthiasc src gnome org>]

commit 071763c8442b503daf135bdb13955837b16fb519
Author: Matthias Clasen <mclasen redhat com>
Date:   Sun Aug 30 08:59:13 2020 -0400

    inspector: Add a dark background to the recorder
    
    Add a button to toggle the background in the node
    view between dark and light. This helps to discern
    the borders of some nodes.

 gtk/inspector/inspector.css |  8 ++++++++
 gtk/inspector/recorder.c    | 20 ++++++++++++++++++++
 gtk/inspector/recorder.ui   |  8 ++++++++
 3 files changed, 36 insertions(+)
---
diff --git a/gtk/inspector/inspector.css b/gtk/inspector/inspector.css
index 920a7cceea..151cbb92ca 100644
--- a/gtk/inspector/inspector.css
+++ b/gtk/inspector/inspector.css
@@ -51,3 +51,11 @@
 stacksidebar.object-details {
   border-top: 1px solid lightgray;
 }
+
+picture.dark {
+  background: gray;
+}
+
+picture.light {
+  background: white;
+}
diff --git a/gtk/inspector/recorder.c b/gtk/inspector/recorder.c
index 0fefa1609d..b4d333f0e6 100644
--- a/gtk/inspector/recorder.c
+++ b/gtk/inspector/recorder.c
@@ -1021,6 +1021,25 @@ render_node_save (GtkButton            *button,
   gtk_widget_show (dialog);
 }
 
+static void
+toggle_dark_mode (GtkToggleButton *button,
+                  GParamSpec      *pspec,
+                  gpointer         data)
+{
+  GtkWidget *picture = data;
+
+  if (gtk_toggle_button_get_active (button))
+    {
+      gtk_widget_add_css_class (picture, "dark");
+      gtk_widget_remove_css_class (picture, "light");
+    }
+  else
+    {
+      gtk_widget_remove_css_class (picture, "dark");
+      gtk_widget_add_css_class (picture, "light");
+    }
+}
+
 static GtkWidget *
 gtk_inspector_recorder_recordings_list_create_widget (gpointer item,
                                                       gpointer user_data)
@@ -1216,6 +1235,7 @@ gtk_inspector_recorder_class_init (GtkInspectorRecorderClass *klass)
   gtk_widget_class_bind_template_callback (widget_class, recordings_list_row_selected);
   gtk_widget_class_bind_template_callback (widget_class, render_node_save);
   gtk_widget_class_bind_template_callback (widget_class, node_property_activated);
+  gtk_widget_class_bind_template_callback (widget_class, toggle_dark_mode);
 
   gtk_widget_class_set_layout_manager_type (widget_class, GTK_TYPE_BIN_LAYOUT);
 }
diff --git a/gtk/inspector/recorder.ui b/gtk/inspector/recorder.ui
index 48bc98d404..d2c932410d 100644
--- a/gtk/inspector/recorder.ui
+++ b/gtk/inspector/recorder.ui
@@ -37,6 +37,14 @@
                 <property name="hexpand">1</property>
               </object>
             </child>
+            <child>
+              <object class="GtkToggleButton" id="dark_mode_button">
+                <property name="has-frame">0</property>
+                <property name="icon-name">display-brightness-symbolic</property>
+                <property name="tooltip-text" translatable="yes">Use a dark background</property>
+                <signal name="notify::active" handler="toggle_dark_mode" swapped="0" 
object="render_node_view"/>
+              </object>
+            </child>
             <child>
               <object class="GtkButton" id="render_node_save_button">
                 <property name="has-frame">0</property>