diff --git a/.Jules/palette.md b/.Jules/palette.md index 6ea0b7c..7b81020 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -1,3 +1,7 @@ ## 2024-05-23 - Webview Accessibility Gaps **Learning:** VS Code Webviews are often implemented as raw HTML/JS and can easily miss standard accessibility features like `aria-label` or focus indicators, which native VS Code UI components handle automatically. **Action:** When auditing VS Code extensions, prioritize checking any `webview` implementations for missing ARIA attributes and focus styles. + +## 2024-06-15 - Lightweight Confirmation in Webviews +**Learning:** Standard modal dialogs are too heavy for micro-interactions within Webviews. A two-step button confirmation (Click -> Confirm? -> Click) provides safety without context switching. +**Action:** Implement inline state-based confirmation for destructive actions in Webviews, using `setTimeout` to auto-reset. diff --git a/src/features/scratchpad/scratchpad.html b/src/features/scratchpad/scratchpad.html index 5b714af..c977461 100644 --- a/src/features/scratchpad/scratchpad.html +++ b/src/features/scratchpad/scratchpad.html @@ -76,6 +76,13 @@ outline: 1px solid var(--vscode-focusBorder); outline-offset: 1px; } + .btn-clear.confirm { + background-color: var(--vscode-button-destructiveBackground); + color: var(--vscode-button-destructiveForeground); + } + .btn-clear.confirm:hover { + background-color: var(--vscode-button-destructiveHoverBackground); + } @@ -88,7 +95,7 @@
0 chars
-
@@ -98,6 +105,7 @@ const textarea = document.getElementById('scratchpad'); const charCount = document.getElementById('char-count'); const btnClear = document.getElementById('btn-clear'); + let clearTimeoutId; // Debounce function function debounce(func, delay) { @@ -113,6 +121,17 @@ charCount.textContent = `${length} char${length !== 1 ? 's' : ''}`; } + function resetClearButton() { + if (clearTimeoutId) { + clearTimeout(clearTimeoutId); + clearTimeoutId = null; + } + btnClear.textContent = 'Clear'; + btnClear.classList.remove('confirm'); + btnClear.setAttribute('aria-label', 'Clear Scratchpad'); + btnClear.dataset.state = 'idle'; + } + // 监听内容变化 const onInput = debounce(() => { vscode.postMessage({ @@ -127,14 +146,29 @@ }); btnClear.addEventListener('click', () => { - if (textarea.value.length > 0) { + if (textarea.value.length === 0) return; + + if (btnClear.dataset.state !== 'confirm') { + // First click: Request confirmation + btnClear.textContent = 'Confirm?'; + btnClear.classList.add('confirm'); + btnClear.setAttribute('aria-label', 'Confirm Clear Scratchpad'); + btnClear.dataset.state = 'confirm'; + + // Reset after 3 seconds + clearTimeoutId = setTimeout(resetClearButton, 3000); + } else { + // Second click: Perform action textarea.value = ''; updateCharCount(); onInput(); textarea.focus(); + resetClearButton(); } }); + textarea.addEventListener('focus', resetClearButton); + // 接收来自扩展的消息 window.addEventListener('message', (event) => { const message = event.data;