Remove vscode references from test case recorder (#1272)

Also simplifies workflow for adding a new directory to recorded test
case dir by adding an inline option:

<img width="870" alt="image"
src="https://user-images.githubusercontent.com/755842/219060655-8a8d3a1d-5989-403e-b56e-80ede9f5526f.png">

## Checklist

- [ ] I have added
[tests](https://www.cursorless.org/docs/contributing/test-case-recorder/)
- [ ] I have updated the
[docs](https://github.com/cursorless-dev/cursorless/tree/main/docs) and
[cheatsheet](https://github.com/cursorless-dev/cursorless/tree/main/cursorless-talon/src/cheatsheet)
- [ ] I have not broken the cheatsheet

---------

Co-authored-by: Andreas Arvidsson <andreas.arvidsson87@gmail.com>

Author: pokey

package.json

@@ -146,6 +146,15 @@
           "light": "#60daff7a",
           "highContrast": "#60daff7a"
         }
+      },
+      {
+        "id": "cursorless.timingCalibrationBackground",
+        "description": "Background color to use for calibrating timing when recording a video",
+        "defaults": {
+          "dark": "#230026",
+          "light": "#230026",
+          "highContrast": "#230026"
+        }
       }
     ],
     "configurationDefaults": {

src/core/commandRunner/CommandRunner.ts

@@ -153,6 +153,7 @@ export default class CommandRunner {
     } catch (e) {
       const err = e as Error;
       console.error(err.stack);
+      await this.graph.testCaseRecorder.commandErrorHook(err);
       throw e;
     } finally {
       if (this.graph.testCaseRecorder.isActive()) {

src/extension.ts

@@ -64,7 +64,6 @@ export async function activate(
   graph.debug.init();
   graph.snippets.init();
   graph.hatTokenMap.init();
-  graph.testCaseRecorder.init();
   graph.statusBarItem.init();
   graph.keyboardCommands.init();
 
@@ -116,8 +115,9 @@ function registerCommands(
   commandRunner: CommandRunner,
   testCaseRecorder: TestCaseRecorder,
 ): void {
-  extensionContext.subscriptions.push(
-    vscode.commands.registerCommand(
+  const commands = [
+    // The core Cursorless command
+    [
       CURSORLESS_COMMAND_ID,
       async (spokenFormOrCommand: string | Command, ...rest: unknown[]) => {
         try {
@@ -126,23 +126,28 @@ function registerCommands(
             ...rest,
           );
         } catch (e) {
-          const error = e as Error;
           if (!isTesting()) {
-            vscodeIde.handleCommandError(error);
+            vscodeIde.handleCommandError(e as Error);
           }
-          await testCaseRecorder.commandErrorHook(error);
-          throw error;
+          throw e;
         }
       },
-    ),
+    ],
 
-    vscode.commands.registerCommand(
-      "cursorless.showCheatsheet",
-      showCheatsheet,
-    ),
-    vscode.commands.registerCommand(
-      "cursorless.internal.updateCheatsheetDefaults",
-      updateDefaults,
+    // Cheatsheet commands
+    ["cursorless.showCheatsheet", showCheatsheet],
+    ["cursorless.internal.updateCheatsheetDefaults", updateDefaults],
+
+    // Testcase recorder commands
+    ["cursorless.recordTestCase", testCaseRecorder.toggle],
+    ["cursorless.pauseRecording", testCaseRecorder.pause],
+    ["cursorless.resumeRecording", testCaseRecorder.resume],
+    ["cursorless.takeSnapshot", testCaseRecorder.takeSnapshot],
+  ] as const;
+
+  extensionContext.subscriptions.push(
+    ...commands.map(([commandId, callback]) =>
+      vscode.commands.registerCommand(commandId, callback),
     ),
   );
 }

src/ide/vscode/VscodeHighlights.ts

@@ -14,6 +14,10 @@ import { VscodeTextEditorImpl } from "./VscodeTextEditorImpl";
 export enum HighlightStyle {
   highlight0 = "highlight0",
   highlight1 = "highlight1",
+  /**
+   * Used for calibrating timing when recording a video
+   */
+  timingCalibration = "timingCalibration",
 }
 
 export type VscodeStyle = FlashStyle | HighlightStyle;

src/ide/vscode/VscodeIDE.ts

@@ -17,6 +17,7 @@ import type {
   IDE,
   RunMode,
 } from "../../libs/common/ide/types/ide.types";
+import { QuickPickOptions } from "../../libs/common/ide/types/QuickPickOptions";
 import {
   fromVscodeRange,
   fromVscodeSelection,
@@ -31,6 +32,7 @@ import VscodeGlobalState from "./VscodeGlobalState";
 import VscodeHighlights, { HighlightStyle } from "./VscodeHighlights";
 import VscodeMessages from "./VscodeMessages";
 import { vscodeRunMode } from "./VscodeRunMode";
+import { vscodeShowQuickPick } from "./vscodeShowQuickPick";
 import { VscodeTextDocumentImpl } from "./VscodeTextDocumentImpl";
 import { VscodeTextEditorImpl } from "./VscodeTextEditorImpl";
 
@@ -57,6 +59,13 @@ export default class VscodeIDE implements IDE {
     this.editorMap = new WeakMap<vscode.TextEditor, VscodeTextEditorImpl>();
   }
 
+  async showQuickPick(
+    items: readonly string[],
+    options?: QuickPickOptions,
+  ): Promise<string | undefined> {
+    return await vscodeShowQuickPick(items, options);
+  }
+
   async init() {
     await this.hats.init();
   }

src/ide/vscode/vscodeShowQuickPick.ts

@@ -0,0 +1,82 @@
+import * as vscode from "vscode";
+import {
+  QuickPickOptions,
+  UnknownValuesOptions,
+} from "../../libs/common/ide/types/QuickPickOptions";
+
+export async function vscodeShowQuickPick(
+  items: readonly string[],
+  options: QuickPickOptions | undefined,
+) {
+  if (options?.unknownValues == null) {
+    return await vscode.window.showQuickPick(items, options);
+  }
+
+  const { unknownValues, ...rest } = options;
+  return await showQuickPickAllowingUnknown(items, unknownValues, rest);
+}
+
+interface CustomQuickPickItem extends vscode.QuickPickItem {
+  value: string;
+}
+
+const DEFAULT_NEW_VALUE_TEMPLATE = "Add new value '{}' →";
+
+/**
+ * Show a quick pick that allows the user to enter a new value.  We do this by
+ * adding a new dummy item to the list as the user is typing.  If they select
+ * the dummy item, we return the value they typed.  It is up to the client to
+ * detect that it is an unknown value and handle that case.
+ *
+ * Based on https://stackoverflow.com/a/69842249
+ * @param items
+ * @param options
+ */
+function showQuickPickAllowingUnknown(
+  choices: readonly string[],
+  unknownValues: UnknownValuesOptions,
+  options: vscode.QuickPickOptions,
+) {
+  return new Promise<string | undefined>((resolve, _reject) => {
+    const quickPick = vscode.window.createQuickPick<CustomQuickPickItem>();
+    const quickPickItems = choices.map((choice) => ({
+      label: choice,
+      value: choice,
+    }));
+    quickPick.items = quickPickItems;
+
+    if (options.title != null) {
+      quickPick.title = options.title;
+    }
+
+    const { newValueTemplate = DEFAULT_NEW_VALUE_TEMPLATE } = unknownValues;
+
+    quickPick.onDidChangeValue(() => {
+      quickPick.items = [
+        ...quickPickItems,
+
+        // INJECT user values into proposed values
+        ...(choices.includes(quickPick.value)
+          ? []
+          : [
+              {
+                label: newValueTemplate.replace("{}", quickPick.value),
+                value: quickPick.value,
+              },
+            ]),
+      ];
+    });
+
+    quickPick.onDidAccept(() => {
+      const selection = quickPick.activeItems[0];
+      resolve(selection.value);
+      quickPick.hide();
+    });
+
+    quickPick.onDidHide(() => {
+      resolve(undefined);
+    });
+
+    quickPick.show();
+  });
+}

src/libs/common/ide/PassthroughIDEBase.ts

@@ -13,6 +13,7 @@ import { FlashDescriptor } from "./types/FlashDescriptor";
 import { Hats } from "./types/Hats";
 import { Disposable, IDE, RunMode, WorkspaceFolder } from "./types/ide.types";
 import { Messages } from "./types/Messages";
+import { QuickPickOptions } from "./types/QuickPickOptions";
 import { State } from "./types/State";
 
 export default class PassthroughIDEBase implements IDE {
@@ -139,6 +140,13 @@ export default class PassthroughIDEBase implements IDE {
     return this.original.openTextDocument(path);
   }
 
+  public showQuickPick(
+    items: readonly string[],
+    options?: QuickPickOptions,
+  ): Promise<string | undefined> {
+    return this.original.showQuickPick(items, options);
+  }
+
   public showInputBox(options?: any): Promise<string | undefined> {
     return this.original.showInputBox(options);
   }

src/libs/common/ide/fake/FakeIDE.ts

@@ -15,6 +15,7 @@ import type {
   RunMode,
   WorkspaceFolder,
 } from "../types/ide.types";
+import { QuickPickOptions } from "../types/QuickPickOptions";
 import { FakeCapabilities } from "./FakeCapabilities";
 import FakeClipboard from "./FakeClipboard";
 import FakeConfiguration from "./FakeConfiguration";
@@ -92,6 +93,13 @@ export default class FakeIDE implements IDE {
     throw Error("Not implemented");
   }
 
+  public showQuickPick(
+    _items: readonly string[],
+    _options?: QuickPickOptions,
+  ): Promise<string | undefined> {
+    throw new Error("Method not implemented.");
+  }
+
   public showInputBox(_options?: any): Promise<string | undefined> {
     throw Error("Not implemented");
   }

src/libs/common/ide/types/QuickPickOptions.ts

@@ -0,0 +1,33 @@
+export interface UnknownValuesOptions {
+  allowed: true;
+
+  /**
+   * An optional template to use when displaying the new option to the user. The
+   * template must include `{}` as a substring, which will be replaced with the
+   * user's input when displaying an option to add the unknown item.
+   *
+   * For example:
+   *
+   * "Add new value '{}' →"
+   *
+   * In this case, when the user types `foo`, the following option will be
+   * displayed in the quickpick that will allow the user to select the unknown
+   * value `foo`:
+   *
+   * "Add new value 'foo' →"
+   */
+  newValueTemplate?: string;
+}
+
+export interface QuickPickOptions {
+  /**
+   * An optional string that represents the title of the quick pick.
+   */
+  title?: string;
+
+  /**
+   * Indicates whether the quick pick should allow unknown values, and if so,
+   * how to handle them.
+   */
+  unknownValues?: UnknownValuesOptions;
+}

src/libs/common/ide/types/ide.types.ts

@@ -18,6 +18,7 @@ import {
 import { FlashDescriptor } from "./FlashDescriptor";
 import { Hats } from "./Hats";
 import { Messages } from "./Messages";
+import { QuickPickOptions } from "./QuickPickOptions";
 import { State } from "./State";
 
 export type RunMode = "production" | "development" | "test";
@@ -167,6 +168,18 @@ export interface IDE {
    */
   showInputBox(options?: InputBoxOptions): Promise<string | undefined>;
 
+  /**
+   * Shows a selection list.
+   *
+   * @param items An array of string choices to present to the user.
+   * @param options Configures the behavior of the selection list.
+   * @return A promise that resolves to the selection or `undefined`.
+   */
+  showQuickPick(
+    items: readonly string[],
+    options?: QuickPickOptions,
+  ): Promise<string | undefined>;
+
   /**
    * Executes the built-in ide command denoted by the given command identifier.
    *