From 2a00ca84530683f08f4e08c8cd93340660728fd5 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Fri, 15 Nov 2024 16:19:35 -0800 Subject: [PATCH] cherry-pick(#33635): chore: add cm placeholder text --- packages/recorder/src/recorder.tsx | 10 +++++----- packages/web/src/components/codeMirrorModule.tsx | 1 + packages/web/src/components/codeMirrorWrapper.css | 4 ++++ packages/web/src/components/codeMirrorWrapper.tsx | 8 ++++++-- tests/library/inspector/cli-codegen-aria.spec.ts | 6 +++--- 5 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx index f98682af89ebf..a34131a2c8828 100644 --- a/packages/recorder/src/recorder.tsx +++ b/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 = ({ }) => { const [selectedFileId, setSelectedFileId] = React.useState(); const [runningFileId, setRunningFileId] = React.useState(); - const [selectedTab, setSelectedTab] = React.useState('log'); + const [selectedTab, setSelectedTab] = useSetting('recorderPropertiesTab', 'log'); const [ariaSnapshot, setAriaSnapshot] = React.useState(); const [ariaSnapshotErrors, setAriaSnapshotErrors] = React.useState(); @@ -189,7 +189,7 @@ export const Recorder: React.FC = ({ { id: 'locator', title: 'Locator', - render: () => + render: () => }, { id: 'log', @@ -198,8 +198,8 @@ export const Recorder: React.FC = ({ }, { id: 'aria', - title: 'Aria snapshot', - render: () => + title: 'Aria', + render: () => }, ]} selectedTab={selectedTab} diff --git a/packages/web/src/components/codeMirrorModule.tsx b/packages/web/src/components/codeMirrorModule.tsx index e0a32772ff9d5..f398032f02e8b 100644 --- a/packages/web/src/components/codeMirrorModule.tsx +++ b/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'; diff --git a/packages/web/src/components/codeMirrorWrapper.css b/packages/web/src/components/codeMirrorWrapper.css index 8851b5445a045..59a519005e274 100644 --- a/packages/web/src/components/codeMirrorWrapper.css +++ b/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; +} diff --git a/packages/web/src/components/codeMirrorWrapper.tsx b/packages/web/src/components/codeMirrorWrapper.tsx index 9957559679be5..68f07704b19b8 100644 --- a/packages/web/src/components/codeMirrorWrapper.tsx +++ b/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 = ({ @@ -62,6 +63,7 @@ export const CodeMirrorWrapper: React.FC = ({ wrapLines, onChange, dataTestId, + placeholder, }) => { const [measure, codemirrorElement] = useMeasure(); const [modulePromise] = React.useState>(import('./codeMirrorModule').then(m => m.default)); @@ -89,7 +91,8 @@ export const CodeMirrorWrapper: React.FC = ({ && 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 = ({ readOnly: !!readOnly, lineNumbers, lineWrapping: wrapLines, + placeholder, }); codemirrorRef.current = { cm }; if (isFocused) @@ -109,7 +113,7 @@ export const CodeMirrorWrapper: React.FC = ({ 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) diff --git a/tests/library/inspector/cli-codegen-aria.spec.ts b/tests/library/inspector/cli-codegen-aria.spec.ts index 820dab7c14137..91e54601fc280 100644 --- a/tests/library/inspector/cli-codegen-aria.spec.ts +++ b/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"' `);