feat: Select all projects iconbutton

l10n/bundle.l10n.de.json

@@ -30,5 +30,7 @@
   "SETTINGS": "EINSTELLUNGEN",
   "PROJECTS": "PROJEKTE",
   "TOOLS": "WERKZEUGE",
-  "SETUP": "KONFIGURATION"
+  "SETUP": "KONFIGURATION",
+  "Select All": "Alle auswählen",
+  "Unselect All": "Alle abwählen"
 }

l10n/bundle.l10n.fr.json

@@ -24,7 +24,9 @@
   "Stop dev server": "Arrêter le serveur de développement",
   "this feature": "cette fonctionnalité",
   "Toggle Playwright Configs": "Basculer les configurations Playwright",
+  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "Si cette option est activée, Playwright réutilisera l'instance du navigateur entre les tests. Cela désactivera l'exécution parallèle.",
+  "Select All": "Tout sélectionner",
+  "Unselect All": "Tout désélectionner",
   "Update snapshots:": "Mettre à jour les captures:",
-  "Update method:" : "Mettre à jour la méthode:",
-  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "Si cette option est activée, Playwright réutilisera l'instance du navigateur entre les tests. Cela désactivera l'exécution parallèle."
+  "Update method:" : "Mettre à jour la méthode:"
 }

l10n/bundle.l10n.it.json

@@ -24,7 +24,9 @@
   "Stop dev server": "Ferma dev server",
   "this feature": "questo feature",
   "Toggle Playwright Configs": "Attiva/disattiva Playwright Configs",
+  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "Quando attivata, Playwright riusa l'instanza browser tra i test. Questo disattiva l'esecuzione parallela.",
+  "Select All": "Seleziona tutto",
+  "Unselect All": "Deseleziona tutto",
   "Update snapshots:": "Aggiorna snapshots:",
-  "Update method:" : "Aggiorna metodo:",
-  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "Quando attivata, Playwright riusa l'instanza browser tra i test. Questo disattiva l'esecuzione parallela."
+  "Update method:" : "Aggiorna metodo:"
 }

l10n/bundle.l10n.json

@@ -24,7 +24,9 @@
   "Stop dev server": "Stop dev server",
   "this feature": "this feature",
   "Toggle Playwright Configs": "Toggle Playwright Configs",
+  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.",
+  "Select All": "Select All",
+  "Unselect All": "Unselect All",
   "Update snapshots:": "Update snapshots:",
-  "Update method:" : "Update method:",
-  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution."
+  "Update method:" : "Update method:"
 }

l10n/bundle.l10n.zh-CN.json

@@ -24,7 +24,9 @@
   "Stop dev server": "停止 dev 服务器",
   "this feature": "该功能",
   "Toggle Playwright Configs": "切换 Playwright 配置",
+  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "启用后，Playwright 将在测试之间重复使用浏览器实例。这将禁用并行执行。",
+  "Select All": "全选",
+  "Unselect All": "取消全选",
   "Update snapshots:": "更新快照:",
-  "Update method:" : "更新方法:",
-  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "启用后，Playwright 将在测试之间重复使用浏览器实例。这将禁用并行执行。"
+  "Update method:" : "更新方法:"
 }

media/settingsView.css

@@ -80,3 +80,12 @@ body[data-vscode-theme-kind=vscode-dark] div.separator {
   flex: none;
   width: 20px;
 }
+
+.section-toolbar > a {
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.section-toolbar > a:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}

media/theme.css

@@ -58,7 +58,11 @@ textarea {
 
 .section-header {
   font-size: 11px;
-  margin: 10px 0 3px 8px;
+  margin: 10px 8px 3px 8px;
   font-weight: 700;
   color: var(--vscode-editor-inlineValuesForeground);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
 }

src/settingsView.ts

@@ -80,6 +80,9 @@ export class SettingsView extends DisposableBase implements vscodeTypes.WebviewV
       } else if (data.method === 'setProjectEnabled') {
         const { configFile, projectName, enabled } = data.params;
         this._models.setProjectEnabled(configFile, projectName, enabled);
+      } else if (data.method === 'setAllProjectsEnabled') {
+        const { configFile, enabled } = data.params;
+        this._models.setAllProjectsEnabled(configFile, enabled);
       } else if (data.method === 'selectModel') {
         this._models.selectModel(data.params.configFile);
       }
@@ -270,7 +273,17 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
           <span id="configToolbar"></span>
         </div>
       </div>
-      <div class="section-header">${vscode.l10n.t('PROJECTS')}</div>
+      <div class="section-header">
+        ${vscode.l10n.t('PROJECTS')}
+        <div class="section-toolbar">
+          <a id="selectAll" role="button" title="${vscode.l10n.t('Select All')}">
+            <svg width="48" height="48" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M9 9H4v1h5V9z"/><path d="M7 12V7H6v5h1z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z"/></svg>
+          </a>
+          <a id="unselectAll" role="button" title="${vscode.l10n.t('Unselect All')}" hidden>
+            <svg width="48" height="48" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M9 9H4v1h5V9z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z"/></svg>
+          </a>
+        </div>
+      </div>
       <div data-testid="projects" id="projects" class="list"></div>
       <div class="section-header">${vscode.l10n.t('SETUP')}</div>
       <div id="rareActions" class="list"></div>
@@ -316,9 +329,12 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
       </div>
     </body>
     <script nonce="${nonce}">
+      const projectsElement = document.getElementById('projects');
+      const selectAllButton = document.getElementById('selectAll');
+      const unselectAllButton = document.getElementById('unselectAll');
+
       let selectConfig;
       function updateProjects(projects) {
-        const projectsElement = document.getElementById('projects');
         projectsElement.textContent = '';
         for (const project of projects) {
           const { name, enabled } = project;
@@ -335,7 +351,18 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
           div.appendChild(label);
           projectsElement.appendChild(div);
         }
+
+        const allEnabled = projects.every(p => p.enabled);
+        selectAllButton.hidden = allEnabled;
+        unselectAllButton.hidden = !allEnabled;
       }
+
+      function setAllProjectsEnabled(enabled) {
+        vscode.postMessage({ method: 'setAllProjectsEnabled', params: { configFile: selectConfig.configFile, enabled } })
+      }
+
+      selectAllButton.addEventListener('click', () => setAllProjectsEnabled(true));
+      unselectAllButton.addEventListener('click', () => setAllProjectsEnabled(false));
 
       const vscode = acquireVsCodeApi();
       for (const input of document.querySelectorAll('input[type=checkbox]')) {

src/testModel.ts

@@ -740,6 +740,19 @@ export class TestModelCollection extends DisposableBase {
     this._didUpdate.fire();
   }
 
+  setAllProjectsEnabled(configFile: string, enabled: boolean) {
+    const model = this._models.find(m => m.config.configFile === configFile);
+    if (!model)
+      return;
+    const projectsToUpdate = model.projects().filter(p => p.isEnabled !== enabled);
+    if (projectsToUpdate.length === 0)
+      return;
+    for (const project of projectsToUpdate)
+      project.isEnabled = enabled;
+    this._saveSettings();
+    this._didUpdate.fire();
+  }
+
   testDirs(): Set<string> {
     const result = new Set<string>();
     for (const model of this._models) {

tests/settings.spec.ts

@@ -46,6 +46,52 @@ test('should toggle setting from webview', async ({ activate }) => {
   expect(configuration.get('reuseBrowser')).toBe(true);
 });
 
+test('should select-all/unselect-all', async ({ activate }) => {
+  const { vscode } = await activate({
+    'playwright.config.ts': `
+      import { defineConfig } from '@playwright/test';
+      export default defineConfig({
+        projects: [
+          { name: 'foo', testMatch: 'foo.ts' },
+          { name: 'bar', testMatch: 'bar.ts' },
+        ]
+      });
+    `,
+  });
+
+  const webView = vscode.webViews.get('pw.extension.settingsView')!;
+
+  await expect(webView.locator('body')).toMatchAriaSnapshot(`
+    - text: PROJECTS
+    - button "Select All"
+    - checkbox "foo" [checked]
+    - checkbox "bar" [checked=false]
+  `);
+
+  await webView.getByRole('checkbox', { name: 'bar' }).check();
+
+  await expect(webView.locator('body')).toMatchAriaSnapshot(`
+    - button "Unselect All"
+    - checkbox "foo" [checked]
+    - checkbox "bar" [checked]
+  `);
+
+  await webView.getByRole('button', { name: 'Unselect All' }).click();
+
+  await expect(webView.locator('body')).toMatchAriaSnapshot(`
+    - button "Select All"
+    - checkbox "foo" [checked=false]
+    - checkbox "bar" [checked=false]
+  `);
+
+  await webView.getByRole('button', { name: 'Select All' }).click();
+  await expect(webView.locator('body')).toMatchAriaSnapshot(`
+    - button "Unselect All"
+    - checkbox "foo" [checked]
+    - checkbox "bar" [checked]
+  `);
+});
+
 test('should reflect changes to setting', async ({ activate }) => {
   const { vscode } = await activate({
     'playwright.config.js': `module.exports = {}`,