chore: polish sidebar ui (#578)

l10n/bundle.l10n.de.json

@@ -24,8 +24,8 @@
   "Stop dev server": "Entwicklungsserver stoppen",
   "this feature": "diese Funktion",
   "Toggle Playwright Configs": "Playwright-Konfigurationen umschalten",
-  "Update snapshots:": "Snapshots aktualisieren:",
-  "Update method:" : "Methode aktualisieren:",
+  "Update snapshots": "Snapshots aktualisieren",
+  "Update method" : "Methode aktualisieren:",
   "When enabled, Playwright will reuse the browser instance between tests. This will disable parallel execution.": "Wenn aktiviert, wird Playwright die Browserinstanz zwischen den Tests wiederverwenden. Dies deaktiviert die parallele Ausführung.",
   "SETTINGS": "EINSTELLUNGEN",
   "PROJECTS": "PROJEKTE",

l10n/bundle.l10n.fr.json

@@ -24,7 +24,7 @@
   "Stop dev server": "Arrêter le serveur de développement",
   "this feature": "cette fonctionnalité",
   "Toggle Playwright Configs": "Basculer les configurations Playwright",
-  "Update snapshots:": "Mettre à jour les captures:",
-  "Update method:" : "Mettre à jour la méthode:",
+  "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."
 }

l10n/bundle.l10n.it.json

@@ -24,7 +24,7 @@
   "Stop dev server": "Ferma dev server",
   "this feature": "questo feature",
   "Toggle Playwright Configs": "Attiva/disattiva Playwright Configs",
-  "Update snapshots:": "Aggiorna snapshots:",
-  "Update method:" : "Aggiorna metodo:",
+  "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."
 }

l10n/bundle.l10n.json

@@ -24,7 +24,7 @@
   "Stop dev server": "Stop dev server",
   "this feature": "this feature",
   "Toggle Playwright Configs": "Toggle Playwright Configs",
-  "Update snapshots:": "Update snapshots:",
-  "Update method:" : "Update method:",
+  "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."
 }

l10n/bundle.l10n.zh-CN.json

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

media/common.css

@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+body {
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  line-height: 22px;
+}
+
+body[data-vscode-theme-kind=vscode-dark] div.separator {
+  border-color: rgba(204, 204, 204, 0.2);
+}
+
+.hbox {
+  display: flex;
+  flex: auto;
+  position: relative;
+}
+
+.vbox {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  position: relative;
+}
+
+svg {
+  transform: scale(0.3);
+  fill: var(--vscode-editor-foreground);
+  margin: -18px;
+  width: 56px;
+  pointer-events: none;
+}
+
+input, textarea {
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--vscode-input-border, transparent);
+  border-radius: 2px;
+  padding: 2px 6px;
+}
+
+input {
+  font-family: system-ui, Ubuntu, "Droid Sans", sans-serif, "Droid Sans Mono", "monospace", monospace;
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0px;  
+}
+
+.combobox {
+  margin: 0 8px;
+}
+
+input:focus, textarea:focus {
+  opacity: 1;
+  outline-color: var(--vscode-focusBorder);
+  outline-offset: -1px;
+  outline-style: solid;
+  outline-width: 1px;
+}
+
+textarea {
+  font-size: 12px;
+}
+
+.section-header {
+  font-size: 11px;
+  margin: 0 8px;
+  font-weight: 700;
+  color: var(--vscode-editor-inlineValuesForeground);
+}
+
+.action, .combobox {
+  padding: 0 4px;
+  cursor: pointer;
+  display: flex;
+}
+
+.action[disabled] {
+  opacity: 0.5;
+  cursor: default;
+  background-color: none !important;
+}
+
+input[type=checkbox] {
+  padding: 0 4px;
+  cursor: pointer;
+}
+
+select {
+  background: transparent;
+  color: inherit;
+  outline: none !important;
+  border: none !important;
+  height: 22px;
+  padding: 2px 0;
+  cursor: pointer;
+  background: var(--vscode-sideBar-background);
+}
+
+label {
+  display: flex;
+  align-items: center;
+  cursor: inherit;
+  flex: auto;
+}
+
+.action:hover, .combobox:hover {
+  background-color: #e8e8e8;
+}
+
+body[data-vscode-theme-kind=vscode-dark] .action:hover,
+body[data-vscode-theme-kind=vscode-dark] .combobox:hover {
+  background-color: #2a2d2e;
+}
+
+/* Settings view */
+
+.settings-view .action-indent {
+  flex: none;
+  width: 4px;
+}
+
+.settings-view.action-big-indent {
+  flex: none;
+  width: 20px;
+}
+
+.settings-view select.models {
+  padding: 2px 0;
+  width: 100%;
+}
+
+/* Locators view */
+
+.locators-view .section {
+  margin: 0 10px 10px;
+  display: flex;
+  flex-direction: column;  
+}
+
+.locators-view .section > label {
+  margin-bottom: 5px;
+}
+
+.locators-view p.error {
+  color: var(--vscode-errorForeground);
+}
+
+.locators-view #actions {
+  flex: none;
+  display: flex;
+  padding: 2px;
+}
+
+.locators-view .action {
+  padding: 0;
+}
+
+.locators-view #locator {
+  flex: auto;
+}

media/common.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-check
+
+// @ts-ignore
+const vscode = acquireVsCodeApi();
+
+/**
+@typedef {{
+  configFile: string,
+}} Config
+
+@typedef {{
+  name: string,
+  enabled: boolean
+}} ProjectEntry
+
+@typedef {{
+  command: string,
+  text: string,
+  svg: string,
+  title?: string,
+  location?: string,
+  hidden?: boolean,
+  disabled?: boolean
+}} ActionDescriptor
+*/
+
+/**
+ * @param {ActionDescriptor} action
+ * @param {{ omitText?: boolean }=} options
+ * @returns {HTMLElement|null}
+ */
+function createAction(action, options) {
+  const actionElement = document.createElement('div');
+  actionElement.classList.add('action');
+  if (action.hidden)
+    return null;
+  if (action.disabled)
+    actionElement.setAttribute('disabled', 'true');
+  const label = document.createElement('label');
+  if (!action.disabled) {
+    label.addEventListener('click', () => {
+      vscode.postMessage({ method: 'execute', params: { command: label.getAttribute('command') } });
+    });
+  }
+  label.setAttribute('role', 'button');
+  label.setAttribute('command', action.command);
+  const svg = /** @type {HTMLElement} */(document.createElement('svg'));
+  label.appendChild(svg);
+  svg.outerHTML = action.svg;
+  if (!options?.omitText && action.text)
+    label.appendChild(document.createTextNode(action.text));
+  label.title = action.title || action.text;
+  actionElement.appendChild(label);
+  return actionElement;
+}
+
+globalThis.createAction = createAction;

media/locatorsView.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-check
+const locatorInput = /** @type {HTMLInputElement} */(document.getElementById('locator'));
+const ariaTextArea = /** @type {HTMLTextAreaElement} */(document.getElementById('ariaSnapshot'));
+
+locatorInput.addEventListener('input', () => {
+  vscode.postMessage({ method: 'locatorChanged', params: { locator: locatorInput.value } });
+});
+
+ariaTextArea.addEventListener('input', () => {
+  vscode.postMessage({ method: 'ariaSnapshotChanged', params: { ariaSnapshot: ariaTextArea.value } });
+});
+
+window.addEventListener('message', event => {
+  const locatorError = /** @type {HTMLElement} */(document.getElementById('locatorError'));
+  const ariaSnapshotError = /** @type {HTMLElement} */(document.getElementById('ariaSnapshotError'));
+  const ariaSection = /** @type {HTMLElement} */(document.getElementById('ariaSection'));
+  const actionsElement = /** @type {HTMLElement} */(document.getElementById('actions'));
+
+  const { method, params } = event.data;
+  if (method === 'update') {
+    locatorInput.value = params.locator.locator;
+    locatorError.textContent = params.locator.error || '';
+    locatorError.style.display = params.locator.error ? 'inherit' : 'none';
+    ariaTextArea.value = params.ariaSnapshot.yaml;
+    ariaSnapshotError.textContent = params.ariaSnapshot.error || '';
+    ariaSnapshotError.style.display = params.ariaSnapshot.error ? 'inherit' : 'none';
+    ariaSection.style.display = params.hideAria ? 'none' : 'flex';
+  } else if (method === 'actions') {
+    actionsElement.textContent = '';
+    for (const action of params.actions) {
+      const actionElement = createAction(action, { omitText: true });
+      if (actionElement)
+        actionsElement.appendChild(actionElement);
+    }
+  }
+});