lookingGlass: Clean up the stylesheet and improve visuals overall

- shuffle stylesheet around for readability
- change names and classes of elements to be consistent
- added style classes to window list elements so they can be styled
- make sure all elements follow OSD style even in light theme
- clean out some old styles

Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7746
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3412>

data/theme/gnome-shell-sass/widgets/_looking-glass.scss

@@ -1,5 +1,35 @@
 /* Looking Glass */
 
+// common
+.lg-dialog {
+
+  StEntry {
+    @extend %osd_entry;
+    min-height: to_em(22px);
+  }
+
+  // override link color since OSD style
+  $lg_link_color: st-lighten(-st-accent-color, 20%);
+  .shell-link {
+    color: $lg_link_color;
+    &:hover { color: st-lighten($lg_link_color, 10%); }
+    &:active { color: st-darken($lg_link_color, 10%); }
+   }
+
+  .actor-link {
+    @extend %monospace;
+    color: st-darken($osd_fg_color, 20%);
+    &:hover { color:$osd_fg_color; }
+    &:active { color: st-lighten($osd_fg_color, 20%); }
+    & StIcon { icon-size: 12px; }
+   }
+}
+
+.lg-completions-text {
+  @extend %caption;
+  font-style: italic;
+}
+
 // Dialog
 #LookingGlassDialog {
 
@@ -40,60 +70,87 @@
   }
 
   .notebook-tab {
-    @extend %osd_button;
+    @extend %osd_button_flat;
+    background-color: transparent;
     -natural-hpadding: $base_padding * 2;
     -minimum-hpadding: $base_padding * 2;
     padding: $base_padding $base_padding * 2;
+    &:selected {
+      @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
     }
-
-  StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
-  StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
-}
-
-.lg-dialog {
-
-  StEntry {
-    @extend %osd_entry;
-    min-height: to_em(22px);
-  }
-
-  .shell-link {
-    color: $link_color;
-    &:hover { color: st-lighten($link_color, 10%); }
-    &:active { color: st-darken($link_color, 10%); }
-   }
-
-  .actor-link {
-    color: $insensitive_fg_color;
-    &:hover { color: lighten($insensitive_fg_color, 20%); }
-    &:active { color: darken($insensitive_fg_color, 20%); }
-
-    & StIcon { icon-size: 12px; }
   }
 }
 
-.lg-completions-text {
+// Inspector
-  @extend %caption;
+#LookingGlassPropertyInspector {
-  font-style: italic;
+
+  background-color: $osd_bg_color;
+  color: $osd_fg_color;
+  border-radius: $modal_radius;
+  border: 1px solid $osd_borders_color;
+  padding: $base_padding * 2;
+
+  @if $contrast == 'high' {
+    border-color: $hc_inset_color;
   }
 
   .lg-obj-inspector-title {
+    @extend %heading;
+    spacing: $base_margin;
+  }
+
+  .lg-obj-inspector-close-button,
+  .lg-obj-inspector-button {
+    @extend %osd_button;
+    padding: $base_padding $base_padding * 2;
+  }
+
+  .lg-obj-inspector-close-button {
+    margin: $base_margin;
+    padding: $base_padding;
+    border-radius: $forced_circular_radius;
+    > StIcon {
+      icon-size: $base_icon_size;
+    }
+  }
+}
+
+
+// Evaluator
+#LookingGlassEvaluator {
+  padding: $base_padding;
+
+  .evaluator-results {
+    @extend %monospace;
     spacing: $base_padding;
   }
-
-.lg-obj-inspector-button {
-  border: 1px solid $borders_color;
-  padding: 4px;
-  border-radius: $base_border_radius;
-  &:hover { border: 1px solid $fg_color; }
 }
 
-#EvalBox {
+// Window List
-  @extend %monospace;
+#LookingGlassWindows {
+
+  padding: $base_padding;
+  spacing: $base_padding;
+
+  .lg-window {
+    @extend %card_common;
+    @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
+    margin: 0;
+    padding: $base_padding * 2;
+
+    .lg-window-name {
+      @extend %heading;
+    }
+
+    .lg-window-props-box {
+      .lg-window-props {
+      }
+    }
+  }
 }
 
 // Extensions
-#lookingGlassExtensions { padding: $base_padding; }
+#LookingGlassExtensions {
 
   .lg-extensions-list {
     padding: $base_padding;
@@ -101,35 +158,78 @@
   }
 
   .lg-extension {
-  @extend %card;
+    @extend %card_common;
-}
+    @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
+    margin: 0;
+    spacing: $base_margin;
+    padding: $base_padding * 2;
 
     .lg-extension-name {
       @extend %heading;
+      color: $osd_fg_color !important;
+    }
+
+    .lg-extension-description {
     }
 
     .lg-extension-meta {
-  spacing: $base_padding;
+      spacing: $base_padding * 2;
+    }
   }
 
-// Inspector
+  .lg-extensions-none {
-#LookingGlassPropertyInspector {
+    @extend %title_4;
-  background: $bg_color;
+    color: transparentize($osd_fg_color, 0.5);
-  border: 1px solid $borders_color;
+  }
-  border-radius: $base_border_radius;
+}
+
+// Actors
+#LookingGlassActors {
   padding: $base_padding;
+  spacing: $base_margin;
+}
+
+// Debug
+#LookingGlassDebugFlags {
+
+  .lg-debug-flags-header {
+    padding: $base_padding;
+    padding-top: 2 * $base_padding;
+    @extend %title_4;
   }
 
   .lg-debug-flag-button {
-  StLabel { padding: $base_padding, 2 * $base_padding; }
+    @extend %osd_button;
+    padding: $base_padding * 1.5 $base_padding * 2;
+    margin-bottom: $base_padding;
 
-  color: $osd_fg_color;
+    StLabel {
-  &:hover { color: lighten($osd_fg_color, 20%); }
+      @extend %monospace;
-  &:active { color: darken($osd_fg_color, 20%); }
+      font-weight: normal !important;
     }
 
-.lg-debug-flags-header {
+    // switch style overrides since lg is OSD style
-  padding-top: 2 * $base_padding;
+    .toggle-switch {
-  padding: $base_padding;
+      @if $contrast == 'high' {
-  @extend %title_2;
+        background: transparentize(white, .7);
+        &:hover {
+          background: transparentize(white, .6);
+        }
+      } @else {
+        background: transparentize(white, .85);
+        &:hover {
+          background: transparentize(white, .8);
+        }
+      }
+      &:checked {
+        background: -st-accent-color;
+        color: -st-accent-fg-color;
+
+        &:hover {
+          background-color: st-lighten(-st-accent-color, 5%);
+          color: st-lighten(-st-accent-fg-color, 5%);
+        }
+      }
+    }
+  }
 }

js/ui/lookingGlass.js

@@ -333,7 +333,7 @@ class Result extends St.BoxLayout {
 const WindowList = GObject.registerClass({
 }, class WindowList extends St.BoxLayout {
     _init(lookingGlass) {
-        super._init({name: 'Windows', vertical: true, style: 'spacing: 8px'});
+        super._init({name: 'LookingGlassWindows', vertical: true});
         let tracker = Shell.WindowTracker.get_default();
         this._updateId = Main.initializeDeferredWork(this, this._updateWindowList.bind(this));
         global.display.connect('window-created', this._updateWindowList.bind(this));
@@ -356,17 +356,22 @@ const WindowList = GObject.registerClass({
                 metaWindow.connect('unmanaged', this._updateWindowList.bind(this));
                 metaWindow._lookingGlassManaged = true;
             }
-            let box = new St.BoxLayout({vertical: true});
+            let box = new St.BoxLayout({vertical: true, style_class: 'lg-window'});
             this.add_child(box);
+
+            let header = new St.BoxLayout({vertical: true, style_class: 'lg-window-name'});
+            box.add_child(header);
+
             let windowLink = new ObjLink(this._lookingGlass, metaWindow, metaWindow.title);
-            box.add_child(windowLink);
+            header.add_child(windowLink);
-            let propsBox = new St.BoxLayout({vertical: true, style: 'padding-left: 6px;'});
+
+            let propsBox = new St.BoxLayout({vertical: true, style_class: 'lg-window-props-box'});
             box.add_child(propsBox);
             propsBox.add_child(new St.Label({text: `wmclass: ${metaWindow.get_wm_class()}`}));
             let app = tracker.get_window_app(metaWindow);
             if (app != null && !app.is_window_backed()) {
                 let icon = app.create_icon_texture(22);
-                let propBox = new St.BoxLayout({style: 'spacing: 6px; '});
+                let propBox = new St.BoxLayout({style_class: 'lg-window-props'});
                 propsBox.add_child(propBox);
                 propBox.add_child(new St.Label({text: 'app: '}));
                 let appLink = new ObjLink(this._lookingGlass, app, app.get_id());
@@ -435,7 +440,7 @@ class ObjInspector extends St.ScrollView {
         }
 
         button = new St.Button({
-            style_class: 'window-close',
+            style_class: 'lg-obj-inspector-close-button',
             icon_name: 'window-close-symbolic',
         });
         button.connect('clicked', this.close.bind(this));
@@ -716,7 +721,7 @@ export const Inspector = GObject.registerClass({
 const Extensions = GObject.registerClass({
 }, class Extensions extends St.BoxLayout {
     _init(lookingGlass) {
-        super._init({vertical: true, name: 'lookingGlassExtensions'});
+        super._init({vertical: true, name: 'LookingGlassExtensions'});
 
         this._lookingGlass = lookingGlass;
         this._noExtensions = new St.Label({
@@ -890,7 +895,7 @@ const ActorLink = GObject.registerClass({
     _init(actor) {
         this._arrow = new St.Icon({
             icon_name: 'pan-end-symbolic',
-            icon_size: 8,
+            icon_size: 12,
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.CENTER,
             pivot_point: new Graphene.Point({x: 0.5, y: 0.5}),
@@ -938,7 +943,7 @@ const ActorLink = GObject.registerClass({
 const ActorTreeViewer = GObject.registerClass(
 class ActorTreeViewer extends St.BoxLayout {
     _init(lookingGlass) {
-        super._init();
+        super._init({name: 'LookingGlassActors'});
 
         this._lookingGlass = lookingGlass;
         this._actorData = new Map();
@@ -1221,7 +1226,7 @@ const DebugFlags = GObject.registerClass(
 class DebugFlags extends St.BoxLayout {
     _init() {
         super._init({
-            name: 'lookingGlassDebugFlags',
+            name: 'LookingGlassDebugFlags',
             vertical: true,
             x_align: Clutter.ActorAlign.CENTER,
         });
@@ -1357,11 +1362,11 @@ class LookingGlass extends St.BoxLayout {
         toolbar.add_child(emptyBox);
         toolbar.add_child(notebook.tabControls);
 
-        this._evalBox = new St.BoxLayout({name: 'EvalBox', vertical: true});
+        this._evalBox = new St.BoxLayout({name: 'LookingGlassEvaluator', vertical: true});
         notebook.appendPage('Evaluator', this._evalBox);
 
         this._resultsArea = new St.BoxLayout({
-            name: 'ResultsArea',
+            style_class: 'evaluator-results',
             vertical: true,
             y_expand: true,
         });