From 7f6e55c6c9dbd4464b4eeda445e953072e5f2572 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Mon, 16 Dec 2024 10:30:43 +0100
Subject: [PATCH 1/7] add select all iconbutton

---
 media/settingsView.css |  9 +++++++++
 media/theme.css        |  6 +++++-
 src/settingsView.ts    | 31 +++++++++++++++++++++++++++++--
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/media/settingsView.css b/media/settingsView.css
index 9c387cfcd..5fe377783 100644
--- a/media/settingsView.css
+++ b/media/settingsView.css
@@ -80,3 +80,12 @@ body[data-vscode-theme-kind=vscode-dark] div.separator {
   width: 4px;
   height: 4px;
 }
+
+.section-toolbar > a {
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.section-toolbar > a:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+}
\ No newline at end of file
diff --git a/media/theme.css b/media/theme.css
index 0440c48a8..3a7fb3249 100644
--- a/media/theme.css
+++ b/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;
 }
diff --git a/src/settingsView.ts b/src/settingsView.ts
index b7ccccf4f..df5bc9c49 100644
--- a/src/settingsView.ts
+++ b/src/settingsView.ts
@@ -268,7 +268,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="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="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('SETTINGS')}</div>
       <div class="list">
@@ -299,9 +309,12 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
       <div id="rareActions" class="list"></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;
@@ -318,7 +331,21 @@ 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 setAllProjects(checked) {
+        for (const input of projectsElement.querySelectorAll('input[type=checkbox]')) {
+          input.checked = checked;
+          input.dispatchEvent(new Event('change'));
+        }
+      }
+
+      selectAllButton.addEventListener('click', () => setAllProjects(true));
+      unselectAllButton.addEventListener('click', () => setAllProjects(false));
 
       const vscode = acquireVsCodeApi();
       for (const input of document.querySelectorAll('input[type=checkbox]')) {

From 510c6cc1810d8dc6c3baaf8b70a540af0aea33e7 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Mon, 16 Dec 2024 10:34:13 +0100
Subject: [PATCH 2/7] add test

---
 tests/settings.spec.ts | 46 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/tests/settings.spec.ts b/tests/settings.spec.ts
index af609f247..690390264 100644
--- a/tests/settings.spec.ts
+++ b/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 = {}`,

From a73614ed1684381ca11072fad75b4cfa0d444bcb Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Mon, 16 Dec 2024 10:39:33 +0100
Subject: [PATCH 3/7] add i10n

---
 l10n/bundle.l10n.de.json    | 4 +++-
 l10n/bundle.l10n.fr.json    | 4 +++-
 l10n/bundle.l10n.it.json    | 4 +++-
 l10n/bundle.l10n.json       | 4 +++-
 l10n/bundle.l10n.zh-CN.json | 4 +++-
 src/settingsView.ts         | 4 ++--
 6 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/l10n/bundle.l10n.de.json b/l10n/bundle.l10n.de.json
index 5de898e56..e56aa0e63 100644
--- a/l10n/bundle.l10n.de.json
+++ b/l10n/bundle.l10n.de.json
@@ -28,5 +28,7 @@
   "SETTINGS": "EINSTELLUNGEN",
   "PROJECTS": "PROJEKTE",
   "TOOLS": "WERKZEUGE",
-  "SETUP": "KONFIGURATION"
+  "SETUP": "KONFIGURATION",
+  "Select All": "Alle auswählen",
+  "Unselect All": "Alle abwählen"
 }
diff --git a/l10n/bundle.l10n.fr.json b/l10n/bundle.l10n.fr.json
index b463b8631..f19798434 100644
--- a/l10n/bundle.l10n.fr.json
+++ b/l10n/bundle.l10n.fr.json
@@ -24,5 +24,7 @@
   "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."
+  "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"
 }
diff --git a/l10n/bundle.l10n.it.json b/l10n/bundle.l10n.it.json
index 1cfbc6659..b3a8a9eb0 100644
--- a/l10n/bundle.l10n.it.json
+++ b/l10n/bundle.l10n.it.json
@@ -24,5 +24,7 @@
   "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."
+  "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"
 }
diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
index 31cf41178..fd159e27c 100644
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -24,5 +24,7 @@
   "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."
+  "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"
 }
diff --git a/l10n/bundle.l10n.zh-CN.json b/l10n/bundle.l10n.zh-CN.json
index f828ce3de..f89fe01a0 100644
--- a/l10n/bundle.l10n.zh-CN.json
+++ b/l10n/bundle.l10n.zh-CN.json
@@ -24,5 +24,7 @@
   "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 将在测试之间重复使用浏览器实例。这将禁用并行执行。"
+  "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "启用后，Playwright 将在测试之间重复使用浏览器实例。这将禁用并行执行。",
+  "Select All": "全选",
+  "Unselect All": "取消全选"
 }
diff --git a/src/settingsView.ts b/src/settingsView.ts
index df5bc9c49..57629ffd3 100644
--- a/src/settingsView.ts
+++ b/src/settingsView.ts
@@ -271,10 +271,10 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
       <div class="section-header">
         ${vscode.l10n.t('PROJECTS')}
         <div class="section-toolbar">
-          <a id="selectAll" role="button" title="Select All">
+          <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="Unselect All" hidden>
+          <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>

From 8f2b484d80ef0c0b72aa1d8a48ef210ab5adff14 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Tue, 17 Dec 2024 10:16:15 +0100
Subject: [PATCH 4/7] refactor to mvc command

---
 src/settingsView.ts | 14 +++++++-------
 src/testModel.ts    | 13 +++++++++++++
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/settingsView.ts b/src/settingsView.ts
index 57629ffd3..97c7abe1d 100644
--- a/src/settingsView.ts
+++ b/src/settingsView.ts
@@ -78,6 +78,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);
       }
@@ -337,15 +340,12 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
         unselectAllButton.hidden = !allEnabled;
       }
       
-      function setAllProjects(checked) {
-        for (const input of projectsElement.querySelectorAll('input[type=checkbox]')) {
-          input.checked = checked;
-          input.dispatchEvent(new Event('change'));
-        }
+      function setAllProjectsEnabled(enabled) {
+        vscode.postMessage({ method: 'setAllProjectsEnabled', params: { configFile: selectConfig.configFile, enabled } })
       }
 
-      selectAllButton.addEventListener('click', () => setAllProjects(true));
-      unselectAllButton.addEventListener('click', () => setAllProjects(false));
+      selectAllButton.addEventListener('click', () => setAllProjectsEnabled(true));
+      unselectAllButton.addEventListener('click', () => setAllProjectsEnabled(false));
 
       const vscode = acquireVsCodeApi();
       for (const input of document.querySelectorAll('input[type=checkbox]')) {
diff --git a/src/testModel.ts b/src/testModel.ts
index 277d3013f..cc529ebc7 100644
--- a/src/testModel.ts
+++ b/src/testModel.ts
@@ -736,6 +736,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) {

From e43f4d75ff3369374071563bbaf51475af57cbd9 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 19 Dec 2024 11:16:23 +0100
Subject: [PATCH 5/7] mark elements as required

---
 media/settingsView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/media/settingsView.js b/media/settingsView.js
index 400ed7404..b5de883b6 100644
--- a/media/settingsView.js
+++ b/media/settingsView.js
@@ -19,8 +19,8 @@
 /** @type {Config} */
 let selectConfig;
 
-const selectAllButton = /** @type {HTMLAnchorElement} */ document.getElementById('selectAll');
-const unselectAllButton = /** @type {HTMLAnchorElement} */ document.getElementById('unselectAll');
+const selectAllButton = /** @type {HTMLAnchorElement} */ (document.getElementById('selectAll'));
+const unselectAllButton = /** @type {HTMLAnchorElement} */ (document.getElementById('unselectAll'));
 
 /**
  * @param {Array<ProjectEntry>} projects

From fd0872df0b7e333e8ca142422dbbd5c60698a697 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Fri, 20 Dec 2024 15:18:56 +0100
Subject: [PATCH 6/7] function type

---
 media/settingsView.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/media/settingsView.js b/media/settingsView.js
index b5de883b6..a0b5b358f 100644
--- a/media/settingsView.js
+++ b/media/settingsView.js
@@ -50,6 +50,9 @@ function updateProjects(projects) {
   unselectAllButton.hidden = !allEnabled;
 }
 
+/**
+ * @param {boolean} enabled
+ */
 function setAllProjectsEnabled(enabled) {
   vscode.postMessage({ method: 'setAllProjectsEnabled', params: { configFile: selectConfig.configFile, enabled } })
 }

From 7bc5ec3b008e9ccca2ba3103de76cfd79b3b8e73 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Fri, 20 Dec 2024 15:22:45 +0100
Subject: [PATCH 7/7] missing semicolon

---
 media/settingsView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/media/settingsView.js b/media/settingsView.js
index a0b5b358f..194189848 100644
--- a/media/settingsView.js
+++ b/media/settingsView.js
@@ -54,7 +54,7 @@ function updateProjects(projects) {
  * @param {boolean} enabled
  */
 function setAllProjectsEnabled(enabled) {
-  vscode.postMessage({ method: 'setAllProjectsEnabled', params: { configFile: selectConfig.configFile, enabled } })
+  vscode.postMessage({ method: 'setAllProjectsEnabled', params: { configFile: selectConfig.configFile, enabled } });
 }
 selectAllButton.addEventListener('click', () => setAllProjectsEnabled(true));
 unselectAllButton.addEventListener('click', () => setAllProjectsEnabled(false));