ui: Tweak form & segmented button styles (#4045)

A few improvements to forms and segmented buttons:
- Modern segmented button styling
- Add FormGrid widget which can be used to lay out sections of forms in
a grid rather than stacked
- Improve 'AddDebugTrackMenu' styling
- Tweak some demo code

<img width="368" height="393" alt="image"
src="https://github.com/user-attachments/assets/245c5c6d-3388-4e9c-aa07-827851449677"
/>

Author: stevegolton

test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-track-menu.png.sha256

@@ -0,0 +1 @@
+92bd72fe856b6a512c6a6e68cc2b2d2a07cb4e68068eb99a8091829928dbb69d

test/data/ui-screenshots/local_cache_key.test.ts/multiple-traces-via-url-and-local-cache-key/back-to-trace-1.png.sha256

@@ -1 +1 @@
-7494fcad7d86147c741dcb75269f98a50958e401741b8b8f0a3cc5e1b6144505
+c00796f5102e3cff6b276566e08537ef0d7e2547ab81640006c1f3f913542f41

test/data/ui-screenshots/local_cache_key.test.ts/multiple-traces-via-url-and-local-cache-key/trace-1.png.sha256

@@ -1 +1 @@
-7494fcad7d86147c741dcb75269f98a50958e401741b8b8f0a3cc5e1b6144505
+c00796f5102e3cff6b276566e08537ef0d7e2547ab81640006c1f3f913542f41

test/data/ui-screenshots/wattson.test.ts/sched-aggregations/sched-aggr-process.png.sha256

@@ -1 +1 @@
-0d9afac02bcd1fa7b3cb3f2ac15b4c937102ee1e99fa49427d886c2775e78d01
+498514b7dcc6357196f710917117550a385eb8538913e52a1525a10b659961bb

test/data/ui-screenshots/wattson.test.ts/sched-aggregations/sched-aggr-thread.png.sha256

@@ -1 +1 @@
-bf4f8037c1d7a5d3c523d8978f5be79a4366ddc4b83b53fe9cc5bb41ef4b5ec8
+bb3cf2112d4e1cc339c93a3af090c21b39bc994a9de94df24b0229b1672274f3

test/data/ui-screenshots/wattson.test.ts/wattson-aggregations/wattson-estimate-aggr.png.sha256

@@ -1 +1 @@
-344728f1ae223a48ba6b9ba463fa3fdbd2017a7cdf7bf4ed3ee4e9a89bda75f3
+54820411fa0a671c6d48cd8eaebe80922e24160678fb46020dc59fe71e8bb5b3

ui/src/assets/widgets/flamegraph.scss

@@ -19,16 +19,20 @@
   .loading-container {
     font-size: larger;
     display: flex;
-    align-items: center;
+    align-items: baseline;
     justify-content: center;
     height: 100%;
   }
 
   .filter-bar {
     margin: 6px 8px;
     display: flex;
-    gap: 6px;
-    align-items: center;
+    column-gap: 6px;
+    align-items: baseline;
+
+    .pf-tag-input {
+      flex-grow: 1;
+    }
 
     .pf-select {
       flex-shrink: 0;
@@ -65,6 +69,7 @@
     background: var(--pf-color-border);
     flex-shrink: 0;
     margin: 0 4px;
+    align-self: center;
   }
 
   .pf-flamegraph-filter-label {

ui/src/assets/widgets/form.scss

@@ -32,13 +32,26 @@
     font-weight: 500;
   }
 
+  &__row {
+    display: grid;
+    gap: 8px 16px;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0 8px;
+    align-items: baseline;
+  }
+
   &__section {
     border: 1px solid var(--pf-color-border);
     display: flex;
     flex-direction: column;
     border-radius: 4px;
     padding: 8px;
-    margin-block: 8px;
+    margin: 0; // Reset default fieldset margin
+    margin-bottom: 8px;
 
     &-label {
       font-weight: 500;
@@ -51,8 +64,9 @@
 
   // Styles for common input elements
   .pf-checkbox,
-  .pf-switch {
-    margin-bottom: 6px;
+  .pf-switch,
+  .pf-segmented-buttons {
+    margin-bottom: 10px;
   }
 
   .pf-select,

ui/src/assets/widgets/segmented_buttons.scss

@@ -17,16 +17,40 @@
 .pf-segmented-buttons {
   display: inline-flex;
   flex-direction: row;
+  align-items: baseline;
+  gap: 2px;
+  padding: 2px;
+  border-radius: $border-radius-large;
+  background: color-mix(
+    in srgb,
+    transparent,
+    var(--pf-color-interactive-base) 10%
+  );
+
+  &--fill-width {
+    display: flex;
+
+    .pf-button {
+      flex: 1;
+    }
+  }
 
   .pf-button {
-    border-radius: 0;
+    border-radius: $border-radius;
+    background: transparent;
+    color: var(--pf-color-text-muted);
 
-    &:first-child {
-      border-radius: $border-radius 0 0 $border-radius;
+    &:hover {
+      background: color-mix(
+        in srgb,
+        transparent,
+        var(--pf-color-interactive-base) 10%
+      );
     }
 
-    &:last-child {
-      border-radius: 0 $border-radius $border-radius 0;
+    &.pf-active {
+      background: var(--pf-color-background);
+      color: var(--pf-color-text);
     }
   }
 }

ui/src/components/tracks/add_debug_track_menu.ts

@@ -16,7 +16,8 @@ import m from 'mithril';
 import {findRef} from '../../base/dom_utils';
 import {assertUnreachable} from '../../base/assert';
 import {Trace} from '../../public/trace';
-import {Form, FormLabel, FormSection} from '../../widgets/form';
+import {Form, FormGrid, FormLabel, FormSection} from '../../widgets/form';
+import {SegmentedButtons} from '../../widgets/segmented_buttons';
 import {Select} from '../../widgets/select';
 import {TextInput} from '../../widgets/text_input';
 import {addDebugCounterTrack, addDebugSliceTrack} from './debug_tracks';
@@ -106,6 +107,7 @@ export class AddDebugTrackMenu
     return m(
       Form,
       {
+        className: 'pf-add-debug-track-menu',
         onSubmit: () => {
           attrs.onAdd?.();
           this.createTracks(attrs);
@@ -132,7 +134,12 @@ export class AddDebugTrackMenu
         this.trackName,
       ),
       m(FormLabel, {for: 'track_type'}, 'Track type'),
-      this.renderTrackTypeSelect(),
+      m(SegmentedButtons, {
+        fillWidth: true,
+        options: [{label: 'Slice Track'}, {label: 'Counter Track'}],
+        selectedOption: trackTypes.indexOf(this.trackType),
+        onOptionSelected: (i) => (this.trackType = trackTypes[i]),
+      }),
       m(
         FormSection,
         {label: 'Column mapping'},
@@ -141,29 +148,6 @@ export class AddDebugTrackMenu
     );
   }
 
-  private renderTrackTypeSelect() {
-    return m(
-      Select,
-      {
-        id: 'track_type',
-        oninput: (e: Event) => {
-          if (!e.target) return;
-          this.trackType = (e.target as HTMLSelectElement).value as TrackType;
-        },
-      },
-      trackTypes.map((value) =>
-        m(
-          'option',
-          {
-            value: value,
-            selected: this.trackType === value,
-          },
-          value,
-        ),
-      ),
-    );
-  }
-
   private renderOptions(availableColumns: ReadonlyArray<string>) {
     switch (this.trackType) {
       case 'slice':
@@ -176,46 +160,33 @@ export class AddDebugTrackMenu
   }
 
   private renderSliceOptions(availableColumns: ReadonlyArray<string>) {
-    return [
-      this.renderFormSelectInput('Timestamp column', 'ts', availableColumns),
-      this.renderFormSelectInput('Duration column', 'dur', [
+    return m(
+      FormGrid,
+      this.renderFormSelectInput('Timestamp *', 'ts', availableColumns),
+      this.renderFormSelectInput('Duration *', 'dur', [
         '0',
         ...availableColumns,
       ]),
-      this.renderFormSelectInput('Name column', 'name', availableColumns),
+      this.renderFormSelectInput('Name *', 'name', availableColumns),
       this.renderColorSelect(availableColumns),
-      this.renderFormSelectInput(
-        'Arguments ID column (optional)',
-        'argSetId',
-        availableColumns,
-        {
-          optional: true,
-        },
-      ),
-      this.renderFormSelectInput(
-        'Pivot column (optional)',
-        'pivot',
-        availableColumns,
-        {
-          optional: true,
-        },
-      ),
-    ];
+      this.renderFormSelectInput('Args ID', 'argSetId', availableColumns, {
+        optional: true,
+      }),
+      this.renderFormSelectInput('Pivot on', 'pivot', availableColumns, {
+        optional: true,
+      }),
+    );
   }
 
   private renderCounterTrackOptions(availableColumns: ReadonlyArray<string>) {
-    return [
-      this.renderFormSelectInput('Timestamp column', 'ts', availableColumns),
-      this.renderFormSelectInput('Value column', 'value', availableColumns),
-      this.renderFormSelectInput(
-        'Pivot column (optional)',
-        'pivot',
-        availableColumns,
-        {
-          optional: true,
-        },
-      ),
-    ];
+    return m(
+      FormGrid,
+      this.renderFormSelectInput('Timestamp *', 'ts', availableColumns),
+      this.renderFormSelectInput('Value *', 'value', availableColumns),
+      this.renderFormSelectInput('Pivot on', 'pivot', availableColumns, {
+        optional: true,
+      }),
+    );
   }
 
   private renderColorSelect(availableColumns: ReadonlyArray<string>) {