Separate locator display from other action contexts

packages/trace-viewer/src/ui/actionList.css

@@ -70,13 +70,20 @@
   flex: none;
 }
 
-.action-selector {
+.action-context {
   display: inline;
   flex: none;
   padding-left: 5px;
+}
+
+.action-locator-context {
   color: var(--vscode-charts-orange);
 }
 
+.action-generic-context {
+  color: var(--vscode-charts-purple);
+}
+
 .action-url {
   display: inline;
   flex: none;

packages/trace-viewer/src/ui/actionList.tsx

@@ -15,18 +15,17 @@
 */
 
 import type { ActionTraceEvent, AfterActionTraceEventAttachment } from '@trace/trace';
-import { msToString } from '@web/uiUtils';
+import { clsx, msToString } from '@web/uiUtils';
 import * as React from 'react';
 import './actionList.css';
 import * as modelUtil from './modelUtil';
-import { asLocator } from '@isomorphic/locatorGenerators';
 import type { Language } from '@isomorphic/locatorGenerators';
 import type { TreeState } from '@web/components/treeView';
 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';
+import { actionContextString } from './string';
 
 export interface ActionListProps {
   actions: ActionTraceEventInContext[],
@@ -105,6 +104,29 @@ export const ActionList: React.FC<ActionListProps> = ({
   </div>;
 };
 
+const ActionContext: React.FC<{
+  action: ActionTraceEvent;
+  sdkLanguage: Language;
+}> = ({ action, sdkLanguage }) => {
+  const contextString = actionContextString(action, sdkLanguage);
+
+  if (contextString === undefined)
+    return null;
+
+  return (
+    <div
+      className={clsx(
+          'action-context',
+          action.apiName.startsWith('locator')
+            ? 'action-locator-context'
+            : 'action-generic-context',
+      )}
+    >
+      {contextString}
+    </div>
+  );
+};
+
 export const renderAction = (
   action: ActionTraceEvent,
   options: {
@@ -117,7 +139,6 @@ export const renderAction = (
   }) => {
   const { sdkLanguage, revealConsole, revealAttachment, isLive, showDuration, showBadges } = options;
   const { errors, warnings } = modelUtil.stats(action);
-  const locator = commandContextString(action, sdkLanguage || 'javascript');
   const showAttachments = !!action.attachments?.length && !!revealAttachment;
 
   let time: string = '';
@@ -130,7 +151,7 @@ export const renderAction = (
   return <>
     <div className='action-title' title={action.apiName}>
       <span>{action.apiName}</span>
-      {locator && <div className='action-selector' title={locator}>{locator}</div>}
+      <ActionContext action={action} sdkLanguage={sdkLanguage || 'javascript'} />
       {action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>}
       {action.class === 'APIRequestContext' && action.params.url && <div className='action-url' title={action.params.url}>{excludeOrigin(action.params.url)}</div>}
     </div>

packages/trace-viewer/src/ui/string.ts

@@ -92,7 +92,7 @@ const formatTouchscreenParams = (params: {
   return undefined;
 };
 
-export const commandContextString = (
+export const actionContextString = (
   action: ActionTraceEvent,
   sdkLanguage: Language,
 ): string | undefined => {