ProcessInfoHeader: use icons for state

data/icons/icons.indicator.gresource.xml

@@ -12,7 +12,9 @@
     <file compressed="true" preprocess="xml-stripblanks" alias="scalable/devices/temperature-gpu-symbolic.svg">temperature-gpu-symbolic.svg</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="scalable/status/process-attention-symbolic.svg">process-attention-symbolic.svg</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="scalable/status/process-emergency-symbolic.svg">process-critical-symbolic.svg</file>
+    <file compressed="true" preprocess="xml-stripblanks" alias="scalable/status/process-fail-symbolic.svg">process-fail-symbolic.svg</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="scalable/status/process-information-symbolic.svg">process-information-symbolic.svg</file>
+    <file compressed="true" preprocess="xml-stripblanks" alias="scalable/status/process-sleep-symbolic.svg">process-sleep-symbolic.svg</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="16x16/actions/bash.svg">extra/16/bash.svg</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="48x48/actions/bash.svg">extra/48/bash.svg</file>
     <file compressed="true" preprocess="xml-stripblanks" alias="64x64/actions/bash.svg">extra/64/bash.svg</file>

data/stylesheet/_index.scss

@@ -8,10 +8,13 @@
     --BLUEBERRY-300: #64baff;
     --BLUEBERRY-500: #3689e6;
 
+    --GRAPE-500: #a56de2;
+
     --LIME-300: #9bdb4d;
 
     --ORANGE-100: #ffc27d;
     --ORANGE-300: #ffa154;
+    --ORANGE-500: #f37329;
     --ORANGE-700: #cc3b02;
     --ORANGE-900: #a62100;
 
@@ -50,15 +53,6 @@
         margin: 0.5em;
     }
 
-    // ProcessInfoHeader
-    &.state {
-        background-color: var(--BLUEBERRY-500);
-        border: none;
-        color: white;
-        font-weight: 700;
-        margin: 0 0.25em;
-    }
-
     &.warning {
         background-color: color-mix(in srgb, var(--BANANA-100) 70%, transparent);
         border-color: color-mix(in srgb, var(--BANANA-900) 30%, transparent);
@@ -177,3 +171,25 @@ columnview {
         background: #{'@bg_color'};
     }
 }
+
+// ProcessInfoHeader
+image.state {
+    background-color: var(--BLUEBERRY-500);
+    box-shadow: 0 1px 2px 1px color-mix(in srgb, black 10%, transparent);
+    color: white;
+    min-height: 24px;
+    min-width: 24px;
+    padding: 0.25em;
+
+    &.R {
+        background-color: var(--ORANGE-500);
+    }
+
+    &.S {
+        background-color: var(--GRAPE-500);
+    }
+
+    &.Z {
+        background-color: #{'@error_color'};
+    }
+}

src/Views/ProcessView/ProcessInfoView/ProcessInfoHeader.vala

@@ -5,7 +5,7 @@
 
 public class Monitor.ProcessInfoHeader : Gtk.Grid {
     private Gtk.Image icon;
-    public Gtk.Label state;
+    private Gtk.Image state_image;
     public Gtk.Label application_name;
     public LabelRoundy pid;
 
@@ -23,17 +23,15 @@ public class Monitor.ProcessInfoHeader : Gtk.Grid {
             pixel_size = 64
         };
 
-        state = new Gtk.Label ("?") {
+        state_image = new Gtk.Image.from_icon_name ("state-unknown-symbolic") {
             halign = START,
             valign = END
         };
-        state.add_css_class ("pill");
-        state.add_css_class ("state");
 
         var icon_container = new Gtk.Overlay () {
             child = icon
         };
-        icon_container.add_overlay (state);
+        icon_container.add_overlay (state_image);
 
         application_name = new Gtk.Label (_("N/A")) {
             ellipsize = END,
@@ -88,30 +86,46 @@ public class Monitor.ProcessInfoHeader : Gtk.Grid {
 
         num_threads.text = process.stat.num_threads.to_string ();
 
-        state.label = process.stat.state;
-        state.tooltip_text = set_state_tooltip ();
+        update_state (process.stat.state);
 
         icon.gicon = process.icon;
     }
 
-    private string set_state_tooltip () {
-        switch (state.label) {
-        case "D":
-            return _("The app is waiting in an uninterruptible disk sleep");
-        case "I":
-            return _("Idle kernel thread");
-        case "R":
-            return _("The process is running or runnable (on run queue)");
-        case "S":
-            return _("The process is in an interruptible sleep; waiting for an event to complete");
-        case "T":
-            return _("The process is stopped by a job control signal");
-        case "t":
-            return _("The process is stopped by a debugger during the tracing");
-        case "Z":
-            return _("The app is terminated but not reaped by its parent");
-        default:
-            return "";
+    private void update_state (string state) {
+        state_image.css_classes = {Granite.CssClass.CIRCULAR, "state", state};
+        switch (state) {
+            case "D":
+                state_image.icon_name = "media-playback-pause-symbolic";
+                state_image.tooltip_text = _("The app is waiting in an uninterruptible disk sleep");
+                break;
+            case "I":
+                state_image.icon_name = "";
+                state_image.tooltip_text = _("Idle kernel thread");
+                break;
+            case "R":
+                state_image.icon_name = "media-playback-start-symbolic";
+                state_image.tooltip_text = _("The process is running or runnable (on run queue)");
+                break;
+            case "S":
+                state_image.icon_name = "process-sleep";
+                state_image.tooltip_text = _("The process is in an interruptible sleep; waiting for an event to complete");
+                break;
+            case "T":
+                state_image.icon_name = "media-playback-stop-symbolic";
+                state_image.tooltip_text = _("The process is stopped by a job control signal");
+                break;
+            case "t":
+                state_image.icon_name = "media-playback-stop-symbolic";
+                state_image.tooltip_text = _("The process is stopped by a debugger during the tracing");
+                break;
+            case "Z":
+                state_image.icon_name = "process-fail-symbolic";
+                state_image.tooltip_text = _("The app is terminated but not reaped by its parent");
+                break;
+            default:
+                state_image.icon_name = "state-unknown-symbolic";
+                state_image.tooltip_text = "";
+                break;
         }
     }