Various UI changes

Author: celonymire

CHANGELOG.md

@@ -11,6 +11,9 @@
 - Always show the icon to indicate the type of current testcase and make it clickable to toggle testcase interactivity
 - Also show the dropdown button (that does nothing) for compiling status to keep the toolbars consistent
 - Shorten the compiling error to just "CE" in stress tester for consistency
+- Allow dropdown when compiling
+- Allow showing details even in faded with same effect
+- Don't clear previous data from stress testers when compiling
 
 ### Fixed
 

src/extension/providers/StressViewProvider.ts

@@ -2,7 +2,7 @@ import * as vscode from "vscode";
 import * as v from "valibot";
 import * as crypto from "crypto";
 
-import { StatusSchema, type Status } from "../../shared/enums";
+import type { Status } from "../../shared/enums";
 import BaseViewProvider from "./BaseViewProvider";
 import {
   compile,
@@ -29,21 +29,11 @@ import {
   OpenMessageSchema,
   ProviderMessageSchema,
   SaveMessageSchema,
-  StateIdValue,
   ToggleVisibilityMessageSchema,
   ViewMessageSchema,
-  type StateId,
   type WebviewMessage,
 } from "../../shared/stress-messages";
-
-const StressDataSchema = v.object({
-  stdin: v.fallback(v.string(), ""),
-  stdout: v.fallback(v.string(), ""),
-  stderr: v.fallback(v.string(), ""),
-  status: v.fallback(StatusSchema, "NA"),
-  state: v.picklist(StateIdValue),
-  shown: v.fallback(v.boolean(), true),
-});
+import { StressDataSchema, type StateId } from "../../shared/schemas";
 
 const FileDataSchema = v.object({
   interactiveMode: v.fallback(v.boolean(), false),
@@ -277,7 +267,6 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
     if (!ctx) return;
 
     super._postMessage({ type: "INIT", interactiveMode: ctx.interactiveMode });
-    super._postMessage({ type: "CLEAR" });
 
     const resendTruncatedData = (handler: TextHandler) => {
       const data = handler.data;
@@ -286,6 +275,7 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
     };
 
     for (const state of ctx.state) {
+      super._postMessage({ type: "CLEAR", id: state.state });
       super._postMessage({
         type: "STATUS",
         id: state.state,
@@ -414,12 +404,13 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
         },
         file
       );
-      state.stdout.reset();
-      state.stderr.reset();
       return compilePromise
         .then((res) => {
           if (res.code !== 0) {
             state.status = "CE";
+            super._postMessage({ type: "CLEAR", id: state.state }, file);
+            state.stdout.reset();
+            state.stderr.reset();
             state.stdout.write(res.stdout, "final");
             state.stderr.write(res.stderr, "final");
             super._postMessage({ type: "STATUS", id: state.state, status: "CE" }, file);
@@ -435,12 +426,6 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
         });
     };
 
-    super._postMessage(
-      {
-        type: "CLEAR",
-      },
-      file
-    );
     const results = await Promise.all([
       addCompileTask(generatorState, solutionSettings.generatorFile!),
       addCompileTask(solutionState, file),
@@ -491,8 +476,8 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
 
     const start = Date.now();
     while (!ctx.stopFlag && (timeLimit === 0 || Date.now() - start <= timeLimit)) {
-      super._postMessage({ type: "CLEAR" }, file);
       for (const state of ctx.state) {
+        super._postMessage({ type: "CLEAR", id: state.state }, file);
         state.stdin.reset();
         state.stdout.reset();
         state.stderr.reset();
@@ -585,13 +570,12 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
 
     if (ctx.clearFlag) {
       for (const state of ctx.state) {
+        super._postMessage({ type: "CLEAR", id: state.state }, file);
         state.stdin.reset();
         state.stdout.reset();
         state.stderr.reset();
         state.status = "NA";
       }
-
-      super._postMessage({ type: "CLEAR" }, file);
     }
     ctx.clearFlag = false;
 
@@ -750,6 +734,7 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
       this.stop();
     } else {
       for (const state of ctx.state) {
+        super._postMessage({ type: "CLEAR", id: state.state });
         state.stdin.reset();
         state.stdout.reset();
         state.stderr.reset();
@@ -761,7 +746,6 @@ export default class extends BaseViewProvider<typeof ProviderMessageSchema, Webv
           status: "NA",
         });
       }
-      super._postMessage({ type: "CLEAR" });
 
       if (this._currentFile) {
         void this._saveState(this._currentFile);

src/shared/schemas.ts

@@ -4,6 +4,9 @@ import { StatusSchema } from "./enums";
 export const MODES = ["standard", "interactive"] as const;
 export type Mode = (typeof MODES)[number];
 
+export const StateIdValue = ["Generator", "Solution", "Judge"] as const;
+export type StateId = (typeof StateIdValue)[number];
+
 export const LanguageSettingsSchema = v.object({
   compileCommand: v.optional(v.array(v.string())),
   runCommand: v.optional(v.array(v.string())),
@@ -61,6 +64,15 @@ export const TestcaseSchema = v.object({
   interactorSecret: v.fallback(v.string(), ""),
 });
 
+export const StressDataSchema = v.object({
+  stdin: v.fallback(v.string(), ""),
+  stdout: v.fallback(v.string(), ""),
+  stderr: v.fallback(v.string(), ""),
+  status: v.fallback(StatusSchema, "NA"),
+  state: v.picklist(StateIdValue),
+  shown: v.fallback(v.boolean(), true),
+});
+
 export type Testcase = v.InferOutput<typeof TestcaseSchema>;
 export type TestcaseProperty = Exclude<keyof Testcase, "uuid">;
 

src/shared/stress-messages.ts

@@ -1,5 +1,6 @@
 import * as v from "valibot";
 import { StatusSchema, StdioValues } from "./enums";
+import { StateIdValue } from "./schemas";
 
 export const WebviewMessageTypeValues = [
   "INIT",
@@ -11,12 +12,8 @@ export const WebviewMessageTypeValues = [
   "SETTINGS_TOGGLE",
 ] as const;
 
-export const StateIdValue = ["Generator", "Solution", "Judge"] as const;
-
 export type WebviewMessageTypeValue = (typeof WebviewMessageTypeValues)[number];
 
-export type StateId = (typeof StateIdValue)[number];
-
 export const WebviewMessageTypeSchema = v.picklist(WebviewMessageTypeValues);
 
 export const InitMessageSchema = v.object({
@@ -39,6 +36,7 @@ export const StdioMessageSchema = v.object({
 
 export const ClearMessageSchema = v.object({
   type: v.literal("CLEAR"),
+  id: v.picklist(StateIdValue),
 });
 
 export const ShowMessageSchema = v.object({

src/webview/judge/App.svelte

@@ -232,7 +232,13 @@
       {#each testcases as testcase, index (testcase.uuid)}
         <div class="testcase-item">
           <TestcaseToolbar {testcase} onprerun={() => handlePrerun(testcase.uuid)} />
-          <Testcase bind:testcase={testcases[index]} bind:this={testcaseRefs[testcase.uuid]} />
+          {#if testcase.status === "COMPILING" || testcase.skipped}
+            <div class="half-opacity">
+              <Testcase bind:testcase={testcases[index]} bind:this={testcaseRefs[testcase.uuid]} />
+            </div>
+          {:else}
+            <Testcase bind:testcase={testcases[index]} bind:this={testcaseRefs[testcase.uuid]} />
+          {/if}
         </div>
       {/each}
       <div class="new-button-wrapper">
@@ -442,4 +448,9 @@
     margin-top: 4px;
     margin-bottom: 24px;
   }
+
+  .half-opacity {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 </style>

src/webview/judge/Testcase.svelte

@@ -48,9 +48,8 @@
 
   const status = $derived(testcase.status);
   const visible = $derived(testcase.shown);
-  const skipped = $derived(testcase.skipped);
   const toggled = $derived(testcase.toggled);
-  const showDetails = $derived(!skipped && visible && !(status === "AC" && !toggled));
+  const showDetails = $derived(visible && !(status === "AC" && !toggled));
 
   export function reset() {
     newStdin = "";
@@ -65,7 +64,7 @@
 </script>
 
 {#if showDetails}
-  {#if status === "NA" || status === "AC" || status === "WA" || status === "RE" || status === "TL" || status === "ML" || status === "CE"}
+  {#if status === "NA" || status === "AC" || status === "WA" || status === "RE" || status === "TL" || status === "ML" || status === "CE" || status === "COMPILING"}
     {#if status !== "CE"}
       {#if testcase.mode === "interactive"}
         <AutoresizeTextarea

src/webview/judge/TestcaseToolbar.svelte

@@ -72,7 +72,6 @@
           data-tooltip={showDetails ? "Hide Details" : "Show Details"}
           aria-label={showDetails ? "Hide" : "Show"}
           onclick={handleToggleVisibility}
-          disabled={skipped}
         >
           <div
             class="codicon codicon-bolded {showDetails
@@ -200,7 +199,7 @@
           class="toolbar-icon toolbar-icon-exclude-highlight"
           data-tooltip={visible ? "Hide Details" : "Show Details"}
           aria-label={visible ? "Hide" : "Show"}
-          disabled
+          onclick={handleToggleVisibility}
         >
           <div
             class="codicon codicon-bolded {visible

src/webview/stress/App.svelte

@@ -3,13 +3,13 @@
   import type * as v from "valibot";
 
   import type { Status, Stdio } from "../../shared/enums";
+  import { type StateId, StateIdValue } from "../../shared/schemas";
   import {
-    StateIdValue,
+    type ClearMessageSchema,
     type ShowMessageSchema,
     type StatusMessageSchema,
     type StdioMessageSchema,
     type WebviewMessage,
-    type StateId,
     InitMessageSchema,
   } from "../../shared/stress-messages";
   import { postProviderMessage } from "./message";
@@ -99,11 +99,13 @@
     }
   }
 
-  function handleClear() {
+  function handleClear({ id }: v.InferOutput<typeof ClearMessageSchema>) {
     for (const state of states) {
-      state.stdin = "";
-      state.stdout = "";
-      state.stderr = "";
+      if (state.id === id) {
+        state.stdin = "";
+        state.stdout = "";
+        state.stderr = "";
+      }
     }
   }
 
@@ -153,7 +155,7 @@
           handleStdio(event.data);
           break;
         case "CLEAR":
-          handleClear();
+          handleClear(event.data);
           break;
         case "SHOW":
           handleShow(event.data);
@@ -213,14 +215,27 @@
             onToggleVisibility={handleToggleVisibility}
             onToggleInteractive={handleToggleInteractive}
           />
-          <State
-            id={item.id}
-            state={item}
-            placeholder={item.placeholder}
-            {interactiveMode}
-            shown={item.shown}
-            onView={handleView}
-          />
+          {#if item.status === "COMPILING"}
+            <div class="half-opacity">
+              <State
+                id={item.id}
+                state={item}
+                placeholder={item.placeholder}
+                {interactiveMode}
+                shown={item.shown}
+                onView={handleView}
+              />
+            </div>
+          {:else}
+            <State
+              id={item.id}
+              state={item}
+              placeholder={item.placeholder}
+              {interactiveMode}
+              shown={item.shown}
+              onView={handleView}
+            />
+          {/if}
         </div>
       {/each}
     {/if}
@@ -343,4 +358,9 @@
   .text-button :global(.codicon) {
     margin-right: 4px;
   }
+
+  .half-opacity {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 </style>

src/webview/stress/State.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Status, Stdio } from "../../shared/enums";
-  import type { StateId } from "../../shared/stress-messages";
+  import type { StateId } from "../../shared/schemas";
   import AutoresizeTextarea from "../AutoresizeTextarea.svelte";
 
   interface IState {
@@ -56,7 +56,7 @@
       variant="stderr"
     />
     <AutoresizeTextarea value={state.stdout} readonly hiddenOnEmpty onexpand={handleViewStdout} />
-  {:else if status !== "COMPILING"}
+  {:else}
     <AutoresizeTextarea value={state.stdin} readonly hiddenOnEmpty onexpand={handleViewStdin} />
     <AutoresizeTextarea
       value={state.stderr}

src/webview/stress/StateToolbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Status } from "../../shared/enums";
-  import type { StateId } from "../../shared/stress-messages";
+  import type { StateId } from "../../shared/schemas";
   import Tooltip from "../Tooltip.svelte";
 
   interface Props {
@@ -56,7 +56,7 @@
           class="state-toolbar-icon state-toolbar-icon-exclude-highlight"
           data-tooltip={showDetails ? "Hide Details" : "Show Details"}
           aria-label={showDetails ? "Hide" : "Show"}
-          disabled
+          onclick={handleToggleVisibility}
         >
           <div
             class="codicon codicon-bolded {showDetails