chore: add cm placeholder text (#33635)

packages/recorder/src/recorder.tsx

@@ -27,7 +27,7 @@ import { CallLogView } from './callLog';
 import './recorder.css';
 import { asLocator } from '@isomorphic/locatorGenerators';
 import { toggleTheme } from '@web/theme';
-import { copy } from '@web/uiUtils';
+import { copy, useSetting } from '@web/uiUtils';
 import yaml from 'yaml';
 import { parseAriaKey } from '@isomorphic/ariaSnapshot';
 import type { AriaKeyError, ParsedYaml } from '@isomorphic/ariaSnapshot';
@@ -47,7 +47,7 @@ export const Recorder: React.FC<RecorderProps> = ({
 }) => {
   const [selectedFileId, setSelectedFileId] = React.useState<string | undefined>();
   const [runningFileId, setRunningFileId] = React.useState<string | undefined>();
-  const [selectedTab, setSelectedTab] = React.useState<string>('log');
+  const [selectedTab, setSelectedTab] = useSetting<string>('recorderPropertiesTab', 'log');
   const [ariaSnapshot, setAriaSnapshot] = React.useState<string | undefined>();
   const [ariaSnapshotErrors, setAriaSnapshotErrors] = React.useState<SourceHighlight[]>();
 
@@ -189,7 +189,7 @@ export const Recorder: React.FC<RecorderProps> = ({
           {
             id: 'locator',
             title: 'Locator',
-            render: () => <CodeMirrorWrapper text={locator} language={source.language} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
+            render: () => <CodeMirrorWrapper text={locator} placeholder='Type locator to inspect' language={source.language} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
           },
           {
             id: 'log',
@@ -198,8 +198,8 @@ export const Recorder: React.FC<RecorderProps> = ({
           },
           {
             id: 'aria',
-            title: 'Aria snapshot',
+            title: 'Aria',
-            render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} language={'yaml'} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
+            render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} placeholder='Type aria template to match' language={'yaml'} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
           },
         ]}
         selectedTab={selectedTab}

packages/web/src/components/codeMirrorModule.tsx

@@ -24,6 +24,7 @@ import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/python/python';
 import 'codemirror/mode/clike/clike';
 import 'codemirror/mode/markdown/markdown';
+import 'codemirror/addon/display/placeholder';
 import 'codemirror/addon/mode/simple';
 import 'codemirror/mode/yaml/yaml';
 

packages/web/src/components/codeMirrorWrapper.css

@@ -181,3 +181,7 @@ body.dark-mode .CodeMirror span.cm-type {
   text-decoration-color: var(--vscode-errorForeground);
   text-decoration-style: wavy;
 }
+
+.CodeMirror-placeholder {
+  color: var(--vscode-input-placeholderForeground) !important;
+}

packages/web/src/components/codeMirrorWrapper.tsx

@@ -46,6 +46,7 @@ export interface SourceProps {
   wrapLines?: boolean;
   onChange?: (text: string) => void;
   dataTestId?: string;
+  placeholder?: string;
 }
 
 export const CodeMirrorWrapper: React.FC<SourceProps> = ({
@@ -62,6 +63,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
   wrapLines,
   onChange,
   dataTestId,
+  placeholder,
 }) => {
   const [measure, codemirrorElement] = useMeasure<HTMLDivElement>();
   const [modulePromise] = React.useState<Promise<CodeMirror>>(import('./codeMirrorModule').then(m => m.default));
@@ -89,7 +91,8 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
         && mode === codemirrorRef.current.cm.getOption('mode')
         && !!readOnly === codemirrorRef.current.cm.getOption('readOnly')
         && lineNumbers === codemirrorRef.current.cm.getOption('lineNumbers')
-        && wrapLines === codemirrorRef.current.cm.getOption('lineWrapping')) {
+        && wrapLines === codemirrorRef.current.cm.getOption('lineWrapping')
+        && placeholder === codemirrorRef.current.cm.getOption('placeholder')) {
         // No need to re-create codemirror.
         return;
       }
@@ -102,6 +105,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
         readOnly: !!readOnly,
         lineNumbers,
         lineWrapping: wrapLines,
+        placeholder,
       });
       codemirrorRef.current = { cm };
       if (isFocused)
@@ -109,7 +113,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
       setCodemirror(cm);
       return cm;
     })();
-  }, [modulePromise, codemirror, codemirrorElement, language, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused]);
+  }, [modulePromise, codemirror, codemirrorElement, language, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused, placeholder]);
 
   React.useEffect(() => {
     if (codemirrorRef.current)

tests/library/inspector/cli-codegen-aria.spec.ts

@@ -67,7 +67,7 @@ test.describe(() => {
     await recorder.page.click('x-pw-tool-item.pick-locator');
     await recorder.page.hover('button');
     await recorder.trustedClick();
-    await recorder.recorderPage.getByRole('tab', { name: 'Aria snapshot' }).click();
+    await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
     await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
       - textbox
       - text: '- button "Submit"'
@@ -88,7 +88,7 @@ test.describe(() => {
     await recorder.page.click('x-pw-tool-item.pick-locator');
     await submitButton.hover();
     await recorder.trustedClick();
-    await recorder.recorderPage.getByRole('tab', { name: 'Aria snapshot' }).click();
+    await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
     await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
       - text: '- button "Submit"'
     `);
@@ -131,7 +131,7 @@ test.describe(() => {
     await submitButton.hover();
     await recorder.trustedClick();
 
-    await recorder.recorderPage.getByRole('tab', { name: 'Aria snapshot' }).click();
+    await recorder.recorderPage.getByRole('tab', { name: 'Aria' }).click();
     await expect(recorder.recorderPage.locator('.tab-aria .CodeMirror')).toMatchAriaSnapshot(`
       - text: '- button "Submit"'
     `);