chore: allow opt out from watch (#21471)

examples/todomvc/tests/integration.spec.ts

@@ -21,12 +21,6 @@ test.describe('New Todo', () => {
     // create a new todo locator
     const newTodo = page.getByPlaceholder('What needs to be done?');
     // Create 1st todo.
-    expect.soft(1).toBe(2);
-    expect.soft(1).toBe(2);
-    expect.soft(1).toBe(2);
-    expect.soft(1).toBe(2);
-    expect.soft(1).toBe(2);
-    expect.soft(1).toBe(2);
     await newTodo.fill(TODO_ITEMS[0]);
     await newTodo.press('Enter');
 

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

@@ -52,6 +52,7 @@ export const WatchModeView: React.FC<{}> = ({
   const [progress, setProgress] = React.useState<Progress>({ total: 0, passed: 0, failed: 0 });
   const [selectedTestItem, setSelectedTestItem] = React.useState<TestItem | undefined>(undefined);
   const [settingsVisible, setSettingsVisible] = React.useState<boolean>(false);
+  const [isWatchingFiles, setIsWatchingFiles] = React.useState<boolean>(true);
 
   updateRootSuite = (rootSuite: Suite, { passed, failed }: Progress) => {
     setRootSuite({ value: rootSuite });
@@ -82,6 +83,7 @@ export const WatchModeView: React.FC<{}> = ({
           <ToolbarButton icon='play' title='Run' onClick={runVisibleTests} disabled={isRunningTest}></ToolbarButton>
           <ToolbarButton icon='debug-stop' title='Stop' onClick={() => sendMessageNoReply('stop')} disabled={!isRunningTest}></ToolbarButton>
           <ToolbarButton icon='refresh' title='Reload' onClick={resetCollectingRootSuite} disabled={isRunningTest}></ToolbarButton>
+          <ToolbarButton icon='eye-watch' title='Watch' toggled={isWatchingFiles} onClick={() => setIsWatchingFiles(!isWatchingFiles)}></ToolbarButton>
           <div className='spacer'></div>
           <ToolbarButton icon='gear' title='Toggle color mode' toggled={settingsVisible} onClick={() => { setSettingsVisible(!settingsVisible); }}></ToolbarButton>
         </Toolbar>
@@ -89,6 +91,7 @@ export const WatchModeView: React.FC<{}> = ({
           projectNames={projectNames}
           rootSuite={rootSuite}
           isRunningTest={isRunningTest}
+          isWatchingFiles={isWatchingFiles}
           runTests={runTests}
           onTestItemSelected={setSelectedTestItem} />}
         {settingsVisible && <SettingsView projectNames={projectNames} setProjectNames={setProjectNames} onClose={() => setSettingsVisible(false)}></SettingsView>}
@@ -105,8 +108,9 @@ export const TestList: React.FC<{
   rootSuite: { value: Suite | undefined },
   runTests: (testIds: string[]) => void,
   isRunningTest: boolean,
+  isWatchingFiles: boolean,
   onTestItemSelected: (test: TestItem | undefined) => void,
-}> = ({ projectNames, rootSuite, runTests, isRunningTest, onTestItemSelected }) => {
+}> = ({ projectNames, rootSuite, runTests, isRunningTest, isWatchingFiles, onTestItemSelected }) => {
   const [filterText, setFilterText] = React.useState<string>('');
   const [selectedTreeItemId, setSelectedTreeItemId] = React.useState<string | undefined>();
   const [expandedItems, setExpandedItems] = React.useState<Map<string, boolean>>(new Map());
@@ -147,10 +151,13 @@ export const TestList: React.FC<{
       selectedTestItem = selectedTreeItem;
     else if (selectedTreeItem?.kind === 'case' && selectedTreeItem.children?.length === 1)
       selectedTestItem = selectedTreeItem.children[0]! as TestItem;
-    sendMessageNoReply('watch', { fileName: fileName(selectedTestItem) });
     return { selectedTreeItem, selectedTestItem };
   }, [selectedTreeItemId, treeItemMap]);
 
+  React.useEffect(() => {
+    sendMessageNoReply('watch', { fileName: isWatchingFiles ? fileName(selectedTestItem) : undefined });
+  }, [selectedTestItem, isWatchingFiles]);
+
   onTestItemSelected(selectedTestItem);
 
   const runTreeItem = (treeItem: TreeItem) => {

packages/web/src/components/listView.css

@@ -48,6 +48,10 @@
   outline: 1px solid var(--vscode-focusBorder);
 }
 
+.list-view-content .list-view-entry.selected {
+  background-color: var(--vscode-list-inactiveSelectionBackground);
+}
+
 .list-view-content:focus .list-view-entry.selected * {
   color: var(--vscode-list-activeSelectionForeground) !important;
 }

packages/web/src/components/toolbar.css

@@ -23,7 +23,6 @@
   align-items: center;
   flex: none;
   z-index: 2;
-  margin: 0 5px;
 }
 
 .toolbar-linewrap {