- Restore focus to main canvas when closing the matrix modal to support keyboard navigation
- Update aria-label to 'Copied' on copy button success to support screen readers
- Conditionally restore original aria-label to prevent overwriting on error
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
- Restore focus to main canvas when closing the matrix modal to support keyboard navigation
- Update aria-label to 'Copied' on copy button success to support screen readers
- Restore original aria-label after timeout
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
- Add api_routes.py with POST /shader_noise_ksampler/save_params endpoint
- Update frontend to use fetch() API instead of browser download
- Register API routes with PromptServer in __init__.py
- Add CHANGELOG.md with version history
- Update README.md with navigation links and version 1.3.0
- Video comparer optimizations for memory efficiency
- Fix absolute imports in shaders/ to use relative paths
- Correct indentation in shader files
- Refactor video_comparer.py and nodes/video_comparer.py
- Add new example workflows
- Update gitignore and package.json
Remove export keyword from TITLE_GRADIENT_COLORS since it's only used
internally by createTitleGradient() and never imported elsewhere.
All 85 tests pass.
- Simplify redundant shimmer conditionals:
Both branches called calculateShimmerPosition(1.0) identically.
Now unconditionally compute shimmer, only cache lastTime conditionally.
- Use TITLE_CORNER_RADIUS constant:
Replaced local 'const cornerRadius = 8' in both golden_eyeball.ts and
gradient_title.ts with the shared TITLE_CORNER_RADIUS constant.
All 85 tests pass.
- Remove redundant Side-by-Side case in computeSize():
The case set height = Math.max(500, width) which was identical to the
default initialization, so it was effectively dead code.
- Extract resetButtonTimeout helper in copyCodeSection():
Both success and error handlers had identical timeout reset logic.
Consolidated into a single helper function, reducing ~25 lines.
All 85 tests pass.
- Restore getExtraMenuOptions context menu in advanced_comparer.ts:
- Layout Mode submenu with all 8 comparison modes
- Reset to Default Size option
- Consistent with video_comparer.ts implementation
- Create COMPARER_MODES constant to eliminate duplicate arrays:
- Used in @comparer_mode property definition
- Used in layoutWidget combo values
- Used in context menu submenu
- Share AnimationCache type in gradient_title.ts:
- Import AnimationCache from golden_eyeball.js
- Remove duplicate RenderCache interface definition
- Note: gradient_title.ts intentionally has its own drawGradientTitle
for equation-styled titles (different visual from golden eyeball)
All 85 tests pass.
- Add .js extension to local imports for browser ES module compatibility
(./golden_eyeball → ./golden_eyeball.js, ./comfy_utils → ./comfy_utils.js)
- Remove unused api import from advanced_comparer.ts and video_comparer.ts
(no longer needed since imageDataToUrl moved to comfy_utils)
- Remove unreachable dead code in gradient_title.ts
(else branch was never reached due to early return for collapsed state)
All 85 tests pass.
- Remove export from drawGoldenEyeball (internal function only)
Makes it a private implementation detail in golden_eyeball.ts
- Remove unused CACHE properties in video_comparer.ts:
- titleCanvas, titleCtx, lastWidth, lastHeight, collapsed
- Now only keeps frameCount, frameSkip, lastTime needed by AnimationCache
- Remove dead cleanup code in onRemoved
- Extract shared imageDataToUrl utility:
- Create new comfy_utils.ts module
- Update advanced_comparer.ts to import shared function
- Update video_comparer.ts to import shared function
- Eliminates duplicated URL building logic
All 85 tests pass.
- Add calculateScaledDimensions() private method to AdvancedImageComparerWidget
- Replace duplicated aspect ratio calculation in 5 draw methods:
- drawImage
- drawImageSideBySide
- drawImageStacked
- drawImageInCell
- drawImageInPair
The helper calculates scaled dimensions to fit an image within usable area
while maintaining aspect ratio, eliminating ~15 lines of repeated logic.
Addresses PR #41 review comment about code duplication.
- Remove unused 'last_y' property from AdvancedImageComparerWidget class
(property was set but never read)
- Remove unused 'declare const app' statement in gradient_title.ts
- Simplify import handling: use direct 'import { app }' instead of alias
Files modified:
- web/src/advanced_comparer.ts
- web/src/gradient_title.ts
- Remove unreachable else branch in drawGradientTitle that could never execute
after early return for collapsed state (line 301-303)
- Remove hidden clearCacheButton debug widget that served no functional purpose
(lines 768-771, also from interface)
Files modified:
- web/src/advanced_comparer.ts
💡 What:
- Exposed the `showToast` utility from `web/shader_params_save_button.js` as `window.showComfyToast`.
- Updated `web/matrix_button.js` to use `window.showComfyToast` for the "Copy Code" feedback.
- Added `:focus-visible` styles to the "Shader Matrix" modal buttons and tabs.
🎯 Why:
- To provide consistent and delightful feedback when copying code snippets.
- To improve accessibility for keyboard users by making focus states clearly visible.
📸 Before/After:
- Before: Copy button text changed to "Copied!". No visible focus ring on dark modal buttons.
- After: "Code copied to clipboard!" toast appears. Interactive elements have a bright purple focus ring.
♿ Accessibility:
- Added `:focus-visible` outline styles using the theme's accent color.
💡 What: Replaced subtle button text changes and console logs with a Toast notification system for the "Save Shader Parameters" button.
🎯 Why: Users need clear, accessible feedback when saving parameters to know if the action succeeded or failed. The previous method was easy to miss.
📸 Verification: Verified via Playwright script `verify_toast.py` with mock environment. Screenshot confirms visibility and styling.
♿ Accessibility: Included `role='alert'` and high-contrast styling for the notifications.
🔧 Fixes:
- Addressed potential zombie process in verification script.
- Added fallback cleanup for toast elements if CSS transitions are disabled.
- Fixed event listener memory leak in toast fallback.
- Standardized fallback logic in test environment.
💡 What: Replaced subtle button text changes and console logs with a Toast notification system for the "Save Shader Parameters" button.
🎯 Why: Users need clear, accessible feedback when saving parameters to know if the action succeeded or failed. The previous method was easy to miss.
📸 Verification: Verified via Playwright script `verify_toast.py` with mock environment. Screenshot confirms visibility and styling.
♿ Accessibility: Included `role='alert'` and high-contrast styling for the notifications.
🔧 Fixes:
- Addressed potential zombie process in verification script.
- Added fallback cleanup for toast elements if CSS transitions are disabled.
💡 What: Replaced subtle button text changes and console logs with a Toast notification system for the "Save Shader Parameters" button.
🎯 Why: Users need clear, accessible feedback when saving parameters to know if the action succeeded or failed. The previous method was easy to miss.
📸 Verification: Verified via Playwright script `verify_toast.py` with mock environment. Screenshot confirms visibility and styling.
♿ Accessibility: Included `role='alert'` and high-contrast styling for the notifications.
- Implements a `keydown` listener on the modal to intercept Tab and Shift+Tab key presses.
- Dynamically queries visible focusable elements (`button`, `input`, etc.) that have a valid `offsetParent`.
- Loops focus between the first and last focusable elements to prevent keyboard users from tabbing out of the modal into obscured content.
- Enhances accessibility for screen reader and keyboard-only users.
Updated the noise name generation logic to correctly capitalize 'FBM' and '3D' acronyms in aria-labels, ensuring consistency with the UI titles and better screen reader experience.
Enhance accessibility for the noise visualization modal by:
- Adding `role="img"` to all generated canvas elements.
- Adding descriptive `aria-label` attributes derived from the noise type ID (e.g., "Visualization of Perlin noise pattern").
- This ensures screen reader users perceive these visualizations as images with meaningful descriptions rather than empty, untagged content.
Verified with `verification/verify_canvas_a11y.js` which mocks the DOM environment.
- Added `window.copyCodeSection` helper in `web/matrix_button.js`.
- Updated documentation modal HTML to include "Copy" buttons next to "Show" buttons for all code examples.
- Added CSS for `.button-group` and `.copy-code-button` with hover and success states.
- Implemented robust error handling for clipboard access and success/error feedback loops.
- Fixed race condition in button state reset by using explicit string "Copy" and clearing timeouts.
- Restored `verification/verify_dos_fix.py` which was inadvertently deleted.
- Hardened error handler to clean up state and manage timeouts correctly.
- Added `window.copyCodeSection` helper in `web/matrix_button.js`.
- Updated documentation modal HTML to include "Copy" buttons next to "Show" buttons for all code examples.
- Added CSS for `.button-group` and `.copy-code-button` with hover and success states.
- Implemented robust error handling for clipboard access and success/error feedback loops.
- Fixed race condition in button state reset by using explicit string "Copy" and clearing timeouts.
- Restored `verification/verify_dos_fix.py` which was inadvertently deleted.
- Added `window.copyCodeSection` helper in `web/matrix_button.js`.
- Updated documentation modal HTML to include "Copy" buttons next to "Show" buttons for all code examples.
- Added CSS for `.button-group` and `.copy-code-button` with hover and success states.
- Implemented robust error handling for clipboard access and success/error feedback loops.
- Restored `verification/verify_dos_fix.py` which was inadvertently deleted.
- Add `aria-expanded` and `aria-controls` to code block toggle buttons in `web/matrix_button.js`.
- Add unique IDs to collapsible code `pre` blocks.
- Update `toggleCodeSection` to dynamically toggle `aria-expanded` state.
- Improve screen reader support for the Shader Matrix modal.
🚨 Severity: HIGH
💡 Vulnerability: User-controlled input in `subfolder` and `type` parameters was concatenated directly into API URLs without encoding in `web/video_comparer.js` and `web/advanced_comparer.js`.
🎯 Impact: This could allow parameter injection or result in broken URLs if filenames/subfolders contain special characters.
🔧 Fix: Wrapped `type` and `subfolder` parameters with `encodeURIComponent` when constructing the `view` API URL.
✅ Verification: Manual verification of the code.
Add full ARIA support and keyboard navigation (Arrow keys, Enter/Space) to the documentation tabs in the Shader Matrix modal.
- Add `role="tablist"`, `role="tab"`, `role="tabpanel"`.
- Implement roving `tabindex` and `aria-selected` management.
- Add `window.handleTabNavigation` to support Arrow Left/Right navigation between tabs.
- Ensure visual focus order matches logical tab order.
- Added `role="dialog"`, `aria-modal="true"`, and `aria-label` to the modal container.
- Added `aria-label` to the icon-only "Close" and "Scroll to top" buttons.
- Implemented initial focus management to set focus on the "Close" button when the modal opens.
These changes ensure screen reader users can correctly identify the modal and navigate its controls.
