[gnome-shell-sass] lookingGlass: Add switches for debug flags

[Florian Müllner <fmuellner src gnome org>]

commit 79d1cb18830ae7ee5731ba2418f32aad5fb4acbd
Author: Sebastian Keller <skeller gnome org>
Date:   Wed Sep 29 20:09:19 2021 +0200

    lookingGlass: Add switches for debug flags
    
    This adds a new "Flags" tab to looking glass where several debug flags
    can be toggled at run time. This includes:
    
    ClutterDebugFlags
    ClutterDrawDebugFlags
    MetaDebugPaintFlags
    MetaDebugTopics
    MetaContext::unsafe-mode
    
    Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3968
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1994>

 widgets/_looking-glass.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)
---
diff --git a/widgets/_looking-glass.scss b/widgets/_looking-glass.scss
index 006c2ef..ec27aac 100644
--- a/widgets/_looking-glass.scss
+++ b/widgets/_looking-glass.scss
@@ -106,4 +106,18 @@ $text_fg_color: #ccc;
   border: 1px solid $osd_borders_color;
   border-radius: $base_border_radius;
   padding: 6px;
-}
\ No newline at end of file
+}
+
+.lg-debug-flag-button {
+  StLabel { padding: $base_spacing, 2 * $base_spacing; }
+
+  color: $text_fg_color;
+  &:hover { color: lighten($text_fg_color, 20%); }
+  &:active { color: darken($text_fg_color, 20%); }
+}
+
+.lg-debug-flags-header {
+  padding-top: 2 * $base_spacing;
+  font-size: 120%;
+  font-weight: bold;
+}