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>
This commit is contained in:
Sam Hewitt 2024-07-11 14:23:04 -02:30 committed by Jakub Steiner
parent 459981ef79
commit fc39c32324
2 changed files with 196 additions and 91 deletions

View File

@ -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,96 +70,166 @@
}
.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 {
@extend %caption;
font-style: italic;
}
.lg-obj-inspector-title {
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 {
@extend %monospace;
}
// Extensions
#lookingGlassExtensions { padding: $base_padding; }
.lg-extensions-list {
padding: $base_padding;
spacing: $base_padding;
}
.lg-extension {
@extend %card;
}
.lg-extension-name {
@extend %heading;
}
.lg-extension-meta {
spacing: $base_padding;
}
// Inspector
#LookingGlassPropertyInspector {
background: $bg_color;
border: 1px solid $borders_color;
border-radius: $base_border_radius;
padding: $base_padding;
}
.lg-debug-flag-button {
StLabel { padding: $base_padding, 2 * $base_padding; }
background-color: $osd_bg_color;
color: $osd_fg_color;
&:hover { color: lighten($osd_fg_color, 20%); }
&:active { color: darken($osd_fg_color, 20%); }
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;
}
}
}
.lg-debug-flags-header {
padding-top: 2 * $base_padding;
// Evaluator
#LookingGlassEvaluator {
padding: $base_padding;
@extend %title_2;
.evaluator-results {
@extend %monospace;
spacing: $base_padding;
}
}
// Window List
#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 {
.lg-extensions-list {
padding: $base_padding;
spacing: $base_padding;
}
.lg-extension {
@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 * 2;
}
}
.lg-extensions-none {
@extend %title_4;
color: transparentize($osd_fg_color, 0.5);
}
}
// 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 {
@extend %osd_button;
padding: $base_padding * 1.5 $base_padding * 2;
margin-bottom: $base_padding;
StLabel {
@extend %monospace;
font-weight: normal !important;
}
// switch style overrides since lg is OSD style
.toggle-switch {
@if $contrast == 'high' {
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%);
}
}
}
}
}

View File

@ -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);
let propsBox = new St.BoxLayout({vertical: true, style: 'padding-left: 6px;'});
header.add_child(windowLink);
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,
});