From 1c3d31ac9cc97c1df33e389b5c306924c8f5faf7 Mon Sep 17 00:00:00 2001
From: Adam Gastineau <adam@agg.im>
Date: Thu, 9 Jan 2025 12:54:31 -0800
Subject: [PATCH] Beginning implementation of commandContextString

---
 packages/trace-viewer/src/ui/actionList.tsx |  3 +-
 packages/trace-viewer/src/ui/string.ts      | 48 +++++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 packages/trace-viewer/src/ui/string.ts

diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx
index 1deb8ecd88..c740fe9c33 100644
--- a/packages/trace-viewer/src/ui/actionList.tsx
+++ b/packages/trace-viewer/src/ui/actionList.tsx
@@ -26,6 +26,7 @@ import { TreeView } from '@web/components/treeView';
 import type { ActionTraceEventInContext, ActionTreeItem } from './modelUtil';
 import type { Boundaries } from './geometry';
 import { ToolbarButton } from '@web/components/toolbarButton';
+import { commandContextString } from './string';
 
 export interface ActionListProps {
   actions: ActionTraceEventInContext[],
@@ -116,7 +117,7 @@ export const renderAction = (
   }) => {
   const { sdkLanguage, revealConsole, revealAttachment, isLive, showDuration, showBadges } = options;
   const { errors, warnings } = modelUtil.stats(action);
-  const locator = action.params.selector ? asLocator(sdkLanguage || 'javascript', action.params.selector) : undefined;
+  const locator = commandContextString(action, sdkLanguage || 'javascript');
   const showAttachments = !!action.attachments?.length && !!revealAttachment;
 
   let time: string = '';
diff --git a/packages/trace-viewer/src/ui/string.ts b/packages/trace-viewer/src/ui/string.ts
new file mode 100644
index 0000000000..e515868eb3
--- /dev/null
+++ b/packages/trace-viewer/src/ui/string.ts
@@ -0,0 +1,48 @@
+import type { ActionTraceEvent } from '@trace/trace';
+import { asLocator, type Language } from '@isomorphic/locatorGenerators';
+
+export const commandContextString = (action: ActionTraceEvent, sdkLanguage: Language): string | undefined => {
+  const params = action.params;
+
+  if (action.apiName.startsWith('clock')) {
+    if ('ticksNumber' in params) {
+      // clock.fastForward/runFor
+      return `${params.ticksNumber}ms`;
+    } else if (params.ticksString) {
+      // clock.fastForward/runFor
+      return params.ticksString;
+    } else if ('timeNumber' in params) {
+      // clock.pauseAt/setFixedTime/setSystemTime
+      try {
+        return new Date(params.timeNumber).toLocaleString();
+      } catch (e) {
+        return undefined;
+      }  
+    }
+  } else if (action.apiName.startsWith('keyboard')) {
+    if (params.key) {
+      // keyboard.press/down/up
+      return params.key;
+    } else if (params.text) {
+      // keyboard.type/insertText
+      return `"${params.text}"`;
+    }
+  } else if (action.apiName.startsWith('locator')) {
+    return asLocator(sdkLanguage, params.selector);
+  } else if (action.apiName.startsWith('mouse')) {
+    if ('x' in params && 'y' in params) {
+      // mouse.click/dblclick/move
+      return `(${params.x}, ${params.y})`;
+    } else if ('deltaX' in params && 'deltaY' in params) {
+      // mouse.wheel
+      return `(${params.deltaX}, ${params.deltaY})`;
+    }
+  } else if (action.apiName.startsWith('touchscreen')) {
+    if ('x' in params && 'y' in params) {
+      // touchscreen.tap
+      return `(${params.x}, ${params.y})`;
+    }
+  }
+  
+  return undefined;
+};
\ No newline at end of file