feat(ui mode): introduce Testing Options and Settings (#31841)

Testing Options control tests, while Settings are UI mode settings. <img width="298" alt="Screenshot 2024-07-25 at 10 54 22 AM" src="https://github.com/user-attachments/assets/7b6f5fff-687b-48d1-80b3-d1e6f2a257e8"> These sections are separately expandable, collapsed by default. <img width="294" alt="Screenshot 2024-07-24 at 2 06 25 PM" src="https://github.com/user-attachments/assets/5d35ac8c-9289-46ca-aaa2-ebc5419fa0c4"> References #31520. --------- Signed-off-by: Simon Knott <info@simonknott.de> Co-authored-by: Simon Knott <info@simonknott.de>
2024-11-30 23:45:33 +03:00 · 2024-07-25 11:23:43 -07:00 · 2024-07-25 11:23:43 -07:00 · a41cebc1c9
commit a41cebc1c9
parent a966abfd31
10 changed files with 155 additions and 69 deletions
--- a/packages/trace-viewer/src/ui/settingsView.css
+++ b/packages/trace-viewer/src/ui/settingsView.css
@ -16,13 +16,22 @@

 .settings-view {
  flex: none;
+  margin-top: 4px;
 }

 .settings-view .setting label {
  display: flex;
  flex-direction: row;
  align-items: center;
-  margin: 6px 2px;
+  margin: 4px 2px;
+}
+
+.settings-view .setting:first-of-type label {
+  margin-top: 2px;
+}
+
+.settings-view .setting:last-of-type label {
+  margin-bottom: 2px;
 }

 .settings-view .setting input {
--- a/packages/trace-viewer/src/ui/settingsView.tsx
+++ b/packages/trace-viewer/src/ui/settingsView.tsx
@ -22,13 +22,11 @@ export const SettingsView: React.FunctionComponent<{
  settings: Setting<boolean>[],
 }> = ({ settings }) => {
  return <div className='vbox settings-view'>
-    {settings.map(setting => {
-      return <div key={setting.name} className='setting'>
+    {settings.map(([value, set, title]) => {
+      return <div key={title} className='setting'>
        <label>
-          <input type='checkbox' checked={setting.value} onClick={() => {
-            setting.set(!setting.value);
-          }}/>
-          {setting.title}
+          <input type='checkbox' checked={value} onClick={() => set(!value)}/>
+          {title}
        </label>
      </div>;
    })}
--- a/packages/trace-viewer/src/ui/uiModeTraceView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeTraceView.tsx
@ -25,11 +25,13 @@ import type { ContextEntry } from '../entries';
 import type { SourceLocation } from './modelUtil';
 import { idForAction, MultiTraceModel } from './modelUtil';
 import { Workbench } from './workbench';
+import { type Setting } from '@web/uiUtils';

 export const TraceView: React.FC<{
+  showRouteActionsSetting: Setting<boolean>,
  item: { treeItem?: TreeItem, testFile?: SourceLocation, testCase?: reporterTypes.TestCase },
  rootDir?: string,
-}> = ({ item, rootDir }) => {
+}> = ({ showRouteActionsSetting, item, rootDir }) => {
  const [model, setModel] = React.useState<{ model: MultiTraceModel, isLive: boolean } | undefined>();
  const [counter, setCounter] = React.useState(0);
  const pollTimer = React.useRef<NodeJS.Timeout | null>(null);
@ -87,6 +89,7 @@ export const TraceView: React.FC<{

  return <Workbench
    key='workbench'
+    showRouteActionsSetting={showRouteActionsSetting}
    model={model?.model}
    showSourcesFirst={true}
    rootDir={rootDir}
--- a/packages/trace-viewer/src/ui/uiModeView.css
+++ b/packages/trace-viewer/src/ui/uiModeView.css
@ -18,6 +18,15 @@
  background-color: var(--vscode-sideBar-background);
 }

+.ui-mode-sidebar > .settings-toolbar {
+  border-top: 1px solid var(--vscode-panel-border);
+  cursor: pointer;
+}
+
+.ui-mode-sidebar > .settings-view {
+  margin: 0 0 3px 23px;
+}
+
 .ui-mode-sidebar input[type=search] {
  flex: auto;
 }
--- a/packages/trace-viewer/src/ui/uiModeView.tsx
+++ b/packages/trace-viewer/src/ui/uiModeView.tsx
@ -29,7 +29,7 @@ import { ToolbarButton } from '@web/components/toolbarButton';
 import { Toolbar } from '@web/components/toolbar';
 import type { XtermDataSource } from '@web/components/xtermWrapper';
 import { XtermWrapper } from '@web/components/xtermWrapper';
-import { toggleTheme } from '@web/theme';
+import { useDarkModeSetting } from '@web/theme';
 import { settings, useSetting } from '@web/uiUtils';
 import { statusEx, TestTree } from '@testIsomorphic/testTree';
 import type { TreeItem  } from '@testIsomorphic/testTree';
@ -39,6 +39,7 @@ import type { TestModel } from './uiModeModel';
 import { FiltersView } from './uiModeFiltersView';
 import { TestListView } from './uiModeTestListView';
 import { TraceView } from './uiModeTraceView';
+import { SettingsView } from './settingsView';

 let xtermSize = { cols: 80, rows: 24 };
 const xtermDataSource: XtermDataSource = {
@ -93,6 +94,37 @@ export const UIModeView: React.FC<{}> = ({
  const [isDisconnected, setIsDisconnected] = React.useState(false);
  const [hasBrowsers, setHasBrowsers] = React.useState(true);
  const [testServerConnection, setTestServerConnection] = React.useState<TestServerConnection>();
+  const [settingsVisible, setSettingsVisible] = React.useState(false);
+  const [testingOptionsVisible, setTestingOptionsVisible] = React.useState(false);
+
+  const [runWorkers, setRunWorkers] = React.useState(queryParams.workers);
+  const singleWorkerSetting = React.useMemo(() => {
+    return [
+      runWorkers === '1',
+      (value: boolean) => {
+        // When started with `--workers=1`, the setting allows to undo that.
+        // Otherwise, fallback to the cli `--workers=X` argument.
+        setRunWorkers(value ? '1' : (queryParams.workers === '1' ? undefined : queryParams.workers));
+      },
+      'Single worker',
+    ] as const;
+  }, [runWorkers, setRunWorkers]);
+
+  const [runHeaded, setRunHeaded] = React.useState(queryParams.headed);
+  const showBrowserSetting = React.useMemo(() => [runHeaded, setRunHeaded, 'Show browser'] as const, [runHeaded, setRunHeaded]);
+
+  const [runUpdateSnapshots, setRunUpdateSnapshots] = React.useState(queryParams.updateSnapshots);
+  const updateSnapshotsSetting = React.useMemo(() => {
+    return [
+      runUpdateSnapshots === 'all',
+      (value: boolean) => setRunUpdateSnapshots(value ? 'all' : 'missing'),
+      'Update snapshots',
+    ] as const;
+  }, [runUpdateSnapshots, setRunUpdateSnapshots]);
+
+  const [, , showRouteActionsSetting] = useSetting('show-route-actions', true, 'Show route actions');
+
+  const darkModeSetting = useDarkModeSetting();

  const inputRef = React.useRef<HTMLInputElement>(null);

@ -284,11 +316,11 @@ export const UIModeView: React.FC<{}> = ({
        grepInvert: queryParams.grepInvert,
        testIds: [...testIds],
        projects: [...projectFilters].filter(([_, v]) => v).map(([p]) => p),
-        workers: queryParams.workers,
+        workers: runWorkers,
        timeout: queryParams.timeout,
-        headed: queryParams.headed,
+        headed: runHeaded,
        outputDir: queryParams.outputDir,
-        updateSnapshots: queryParams.updateSnapshots,
+        updateSnapshots: runUpdateSnapshots,
        reporters: queryParams.reporters,
        trace: 'on',
      });
@ -300,7 +332,7 @@ export const UIModeView: React.FC<{}> = ({
      setTestModel({ ...testModel });
      setRunningState(undefined);
    });
-  }, [projectFilters, runningState, testModel, testServerConnection]);
+  }, [projectFilters, runningState, testModel, testServerConnection, runWorkers, runHeaded, runUpdateSnapshots]);

  // Watch implementation.
  React.useEffect(() => {
@ -403,14 +435,13 @@ export const UIModeView: React.FC<{}> = ({
          <XtermWrapper source={xtermDataSource}></XtermWrapper>
        </div>
        <div className={'vbox' + (isShowingOutput ? ' hidden' : '')}>
-          <TraceView item={selectedItem} rootDir={testModel?.config?.rootDir} />
+          <TraceView showRouteActionsSetting={showRouteActionsSetting} item={selectedItem} rootDir={testModel?.config?.rootDir} />
        </div>
      </div>
      <div className='vbox ui-mode-sidebar'>
        <Toolbar noShadow={true} noMinHeight={true}>
          <img src='playwright-logo.svg' alt='Playwright logo' />
          <div className='section-title'>Playwright</div>
-          <ToolbarButton icon='color-mode' title='Toggle color mode' onClick={() => toggleTheme()} />
          <ToolbarButton icon='refresh' title='Reload' onClick={() => reloadTests()} disabled={isRunningTest || isLoading}></ToolbarButton>
          <ToolbarButton icon='terminal' title={'Toggle output — ' + (isMac ? '⌃`' : 'Ctrl + `')} toggled={isShowingOutput} onClick={() => { setIsShowingOutput(!isShowingOutput); }} />
          {!hasBrowsers && <ToolbarButton icon='lightbulb-autofix' style={{ color: 'var(--vscode-list-warningForeground)' }} title='Playwright browsers are missing' onClick={openInstallDialog} />}
@ -457,6 +488,31 @@ export const UIModeView: React.FC<{}> = ({
          requestedCollapseAllCount={collapseAllCount}
          setFilterText={setFilterText}
        />
+        <Toolbar noShadow={true} noMinHeight={true} className='settings-toolbar' onClick={() => setTestingOptionsVisible(!testingOptionsVisible)}>
+          <span
+            className={`codicon codicon-${testingOptionsVisible ? 'chevron-down' : 'chevron-right'}`}
+            style={{ marginLeft: 5 }}
+            title={testingOptionsVisible ? 'Hide Testing Options' : 'Show Testing Options'}
+          />
+          <div className='section-title'>Testing Options</div>
+        </Toolbar>
+        {testingOptionsVisible && <SettingsView settings={[
+          singleWorkerSetting,
+          showBrowserSetting,
+          updateSnapshotsSetting,
+        ]} />}
+        <Toolbar noShadow={true} noMinHeight={true} className='settings-toolbar' onClick={() => setSettingsVisible(!settingsVisible)}>
+          <span
+            className={`codicon codicon-${settingsVisible ? 'chevron-down' : 'chevron-right'}`}
+            style={{ marginLeft: 5 }}
+            title={settingsVisible ? 'Hide Settings' : 'Show Settings'}
+          />
+          <div className='section-title'>Settings</div>
+        </Toolbar>
+        {settingsVisible && <SettingsView settings={[
+          darkModeSetting,
+          showRouteActionsSetting,
+        ]} />}
      </div>
    </SplitView>
  </div>;
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@ -36,7 +36,7 @@ import { AttachmentsTab } from './attachmentsTab';
 import type { Boundaries } from '../geometry';
 import { InspectorTab } from './inspectorTab';
 import { ToolbarButton } from '@web/components/toolbarButton';
-import { useSetting, msToString } from '@web/uiUtils';
+import { useSetting, msToString, type Setting } from '@web/uiUtils';
 import type { Entry } from '@trace/har';
 import './workbench.css';
 import { testStatusIcon, testStatusText } from './testUtils';
@ -53,8 +53,9 @@ export const Workbench: React.FunctionComponent<{
  isLive?: boolean,
  status?: UITestStatus,
  inert?: boolean,
+  showRouteActionsSetting?: Setting<boolean>,
  openPage?: (url: string, target?: string) => Window | any,
-}> = ({ model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status, inert, openPage }) => {
+}> = ({ showRouteActionsSetting, model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status, inert, openPage }) => {
  const [selectedAction, setSelectedActionImpl] = React.useState<ActionTraceEventInContext | undefined>(undefined);
  const [revealedStack, setRevealedStack] = React.useState<StackFrame[] | undefined>(undefined);
  const [highlightedAction, setHighlightedAction] = React.useState<ActionTraceEventInContext | undefined>();
@ -67,7 +68,11 @@ export const Workbench: React.FunctionComponent<{
  const activeAction = model ? highlightedAction || selectedAction : undefined;
  const [selectedTime, setSelectedTime] = React.useState<Boundaries | undefined>();
  const [sidebarLocation, setSidebarLocation] = useSetting<'bottom' | 'right'>('propertiesSidebarLocation', 'bottom');
-  const [showRouteActions, , showRouteActionsSetting] = useSetting('show-route-actions', true, 'Show route actions');
+  const [, , showRouteActionsSettingInternal] = useSetting(showRouteActionsSetting ? undefined : 'show-route-actions', true, 'Show route actions');
+
+  const showSettings = !showRouteActionsSetting;
+  showRouteActionsSetting ||= showRouteActionsSettingInternal;
+  const showRouteActions = showRouteActionsSetting[0];

  const filteredActions = React.useMemo(() => {
    return (model?.actions || []).filter(action => showRouteActions || action.class !== 'Route');
@ -229,6 +234,40 @@ export const Workbench: React.FunctionComponent<{
  else if (model && model.wallTime)
    time = Date.now() - model.wallTime;

+  const actionsTab: TabbedPaneTabModel = {
+    id: 'actions',
+    title: 'Actions',
+    component: <div className='vbox'>
+      {status && <div className='workbench-run-status'>
+        <span className={`codicon ${testStatusIcon(status)}`}></span>
+        <div>{testStatusText(status)}</div>
+        <div className='spacer'></div>
+        <div className='workbench-run-duration'>{time ? msToString(time) : ''}</div>
+      </div>}
+      <ActionList
+        sdkLanguage={sdkLanguage}
+        actions={filteredActions}
+        selectedAction={model ? selectedAction : undefined}
+        selectedTime={selectedTime}
+        setSelectedTime={setSelectedTime}
+        onSelected={onActionSelected}
+        onHighlighted={setHighlightedAction}
+        revealConsole={() => selectPropertiesTab('console')}
+        isLive={isLive}
+      />
+    </div>
+  };
+  const metadataTab: TabbedPaneTabModel = {
+    id: 'metadata',
+    title: 'Metadata',
+    component: <MetadataView model={model}/>
+  };
+  const settingsTab: TabbedPaneTabModel = {
+    id: 'settings',
+    title: 'Settings',
+    component: <SettingsView settings={[showRouteActionsSetting]}/>,
+  };
+
  return <div className='vbox workbench' {...(inert ? { inert: 'true' } : {})}>
    <Timeline
      model={model}
@ -254,41 +293,7 @@ export const Workbench: React.FunctionComponent<{
          setHighlightedLocator={locatorPicked}
          openPage={openPage} />
        <TabbedPane
-          tabs={[
-            {
-              id: 'actions',
-              title: 'Actions',
-              component: <div className='vbox'>
-                {status && <div className='workbench-run-status'>
-                  <span className={`codicon ${testStatusIcon(status)}`}></span>
-                  <div>{testStatusText(status)}</div>
-                  <div className='spacer'></div>
-                  <div className='workbench-run-duration'>{time ? msToString(time) : ''}</div>
-                </div>}
-                <ActionList
-                  sdkLanguage={sdkLanguage}
-                  actions={filteredActions}
-                  selectedAction={model ? selectedAction : undefined}
-                  selectedTime={selectedTime}
-                  setSelectedTime={setSelectedTime}
-                  onSelected={onActionSelected}
-                  onHighlighted={setHighlightedAction}
-                  revealConsole={() => selectPropertiesTab('console')}
-                  isLive={isLive}
-                />
-              </div>
-            },
-            {
-              id: 'metadata',
-              title: 'Metadata',
-              component: <MetadataView model={model}/>
-            },
-            {
-              id: 'settings',
-              title: 'Settings',
-              component: <SettingsView settings={[showRouteActionsSetting]}/>,
-            }
-          ]}
+          tabs={showSettings ? [actionsTab, metadataTab, settingsTab] : [actionsTab, metadataTab]}
          selectedTab={selectedNavigatorTab}
          setSelectedTab={setSelectedNavigatorTab}
        />
--- a/packages/web/src/components/toolbar.tsx
+++ b/packages/web/src/components/toolbar.tsx
@ -20,12 +20,16 @@ import * as React from 'react';
 type ToolbarProps = {
  noShadow?: boolean;
  noMinHeight?: boolean;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
 };

 export const Toolbar: React.FC<React.PropsWithChildren<ToolbarProps>> = ({
  noShadow,
  children,
-  noMinHeight
+  noMinHeight,
+  className,
+  onClick,
 }) => {
-  return <div className={'toolbar' + (noShadow ? ' no-shadow' : '') + (noMinHeight ? ' no-min-height' : '')}>{children}</div>;
+  return <div className={'toolbar' + (noShadow ? ' no-shadow' : '') + (noMinHeight ? ' no-min-height' : '') + ' ' + (className || '')} onClick={onClick}>{children}</div>;
 };
--- a/packages/web/src/theme.ts
+++ b/packages/web/src/theme.ts
@ -14,7 +14,8 @@
 * limitations under the License.
 */

-import { settings } from './uiUtils';
+import React from 'react';
+import { type Setting, settings } from './uiUtils';

 export function applyTheme() {
  if ((document as any).playwrightThemeInitialized)
@ -64,3 +65,13 @@ export function removeThemeListener(listener: (theme: Theme) => void) {
 export function currentTheme(): Theme {
  return document.body.classList.contains('dark-mode') ? 'dark-mode' : 'light-mode';
 }
+
+export function useDarkModeSetting() {
+  const [theme, setTheme] = React.useState(currentTheme() === 'dark-mode');
+  return [theme, (value: boolean) => {
+    const current = currentTheme() === 'dark-mode';
+    if (current !== value)
+      toggleTheme();
+    setTheme(value);
+  }, 'Dark mode'] as Setting<boolean>;
+}
--- a/packages/web/src/uiUtils.ts
+++ b/packages/web/src/uiUtils.ts
@ -139,12 +139,7 @@ export function copy(text: string) {
  textArea.remove();
 }

-export type Setting<T> = {
-  value: T;
-  set: (value: T) => void;
-  name: string;
-  title: string;
-};
+export type Setting<T> = readonly [T, (value: T) => void, string];

 export function useSetting<S>(name: string | undefined, defaultValue: S, title?: string): [S, React.Dispatch<React.SetStateAction<S>>, Setting<S>] {
  if (name)
@ -155,12 +150,7 @@ export function useSetting<S>(name: string | undefined, defaultValue: S, title?:
      settings.setObject(name, value);
    setValue(value);
  }, [name, setValue]);
-  const setting = {
-    value,
-    set: setValueWrapper,
-    name: name || '',
-    title: title || name || '',
-  };
+  const setting = [value, setValueWrapper, title || name || ''] as Setting<S>;
  return [value, setValueWrapper, setting];
 }

--- a/tests/playwright-test/ui-mode-test-output.spec.ts
+++ b/tests/playwright-test/ui-mode-test-output.spec.ts
@ -45,7 +45,8 @@ test('should work after theme switch', async ({ runUITest, writeFiles }) => {
  await page.getByTitle('Run all').click();
  await expect(page.getByTestId('output')).toContainText(`Hello world 1`);

-  await page.getByTitle('Toggle color mode').click();
+  await page.getByText('Settings', { exact: true }).click();
+  await page.getByLabel('Dark mode').click();
  await writeFiles({
    'a.test.ts': `
      import { test, expect } from '@playwright/test';