- Replaced read-only hex code span with an editable text input in `createColorPicker`
- Implemented bidirectional sync between text input and color picker
- Added validation for hex codes and auto-correction on blur
- Ensured keydown propagation is stopped to prevent triggering global shortcuts
- Added aria-label for accessibility
- Updated unit tests to verify sync logic and event handling
- Added CSS styles for `magnify-color-preview` input to match UI design
Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
Removed the `isHtml` flag support in `UIManager`, which allowed bypassing HTML escaping.
Replaced it with a `specialType` mechanism (specifically 'focus-node') to render trusted
HTML structures internally while ensuring dynamic values are always escaped.
Updated `Security.test.ts` to verify the fix and prevent regression.
Fixes: Potential XSS vulnerability via unchecked HTML injection.
Refactors `MagnifyGlass.updateMagnifiedView` and `calculateSourceRegion` to accept an optional cached `DOMRect`. This allows `EventHandler` to pass the canvas dimensions it read before updating the glass position, preventing a forced synchronous reflow (Read-Write-Read cycle) that was previously occurring on every mouse move frame.
Optimizes the hot path for mouse movement and magnifier updates.
- Add visible focus indicators for interactive elements in the sidebar
- Add aria-valuetext to sliders to announce values with units
- Update journal with accessibility learnings
- Implemented 'onWidgetEdit' listener in 'InfoPanel' to force refresh when popout widgets change.
- Refactored 'NodeDataExtractor' to display all widgets in the inspector (matching popout behavior) and removed aggressive deduplication.
- Fixed theme update logic in 'UIManager' to correctly handle hyphenated theme names.
- Enhanced combo box editing in 'popout-viewer.html' with better selection and blur handling.
- Added 'Obsidian', 'Obsidian Dark', and 'Milk White' themes to Info Panel and PopOut viewer.
- Improved theme detection in 'StateManager' to support new themes.
- Implemented button widget support in PopOut viewer with 'button-click' event handling.
- Enhanced widget options handling in 'PopOutManager' for combo widgets.
- Updated dropdown accessibility tests.
- Updated `drawNodeImages` to render multiple images from `node.imgs[]` in a grid.
- Implemented aspect-ratio-preserving centering for each image within its grid cell.
- Added configurable gap between images in the grid.
- Added support for inline action buttons in the inspector panel.
- Implemented `InlineControlFactory.createInlineButton` to execute widget callbacks.
- Enhanced `WidgetSyncManager` to detect 'button' widgets via type or heuristics.
- Updated `UIManager` and `NodeDataExtractor` to process actionable widgets.
- Added styles for inline action buttons.
- Added `Escape` key handler to slider widget editor.
- Refactored canvas coordinate calculations in `MagnifyGlass` for better accuracy.
- Refactor `showWebGLError` to use `document.createElement` instead of `innerHTML`
- Replace inline `onclick` handler with `addEventListener` for CSP compliance
- Add unit test to verify XSS prevention and button functionality
- Add role="button", tabindex="0", and aria-expanded to section headers
- Implement keyboard navigation (Enter/Space) for expanding/collapsing sections
- Generate unique IDs for aria-controls to link headers and content bodies
- Ensure proper accessibility attributes for sidebar inspector panel
This change improves keyboard navigation and screen reader support for the
sidebar settings and inspector panels.
- Moves invariant calculations (DPR, scaling, pivot points) out of the widget loop in `renderHtmlOverlays`.
- Reduces redundant property accesses and arithmetic operations per frame.
- Improves performance for workflows with many visible nodes.
- Added '*' hotkey to focus the currently inspected node
- Added 'ArrowLeft' and 'ArrowRight' hotkeys to navigate nodes by execution order
- Updated README.md and CHANGELOG.md with the new hotkeys and navigation features
- Added full keyboard support (Arrows, Enter, Esc) for all dropdown types
- Implemented global '*' hotkey to center canvas on currently inspected node
- Improved event handling to reliably intercept keys before ComfyUI canvas
- Fixed memory leaks in dropdown event listeners
- Allow precise value input by removing automatic step rounding in sync manager
- Standardize stepper button increment to 1 for finer control
- Ensure dropdowns close when clicking the canvas
Ensures `htmlOverlayContainer` is cleared when exiting `renderHtmlOverlays` early (e.g. no nodes or zero scale), preventing stale content from persisting.
- Replaced `innerHTML` with `textContent` for dynamic titles in `SidebarSettings.ts` to prevent potential XSS.
- Maintained `innerHTML` usage only for trusted static SVG icons.
- Added defense-in-depth against future changes that might introduce user-controlled titles.
Refactors `renderHtmlOverlays` to eliminate layout thrashing by separating DOM read operations (getBoundingClientRect, getComputedStyle) from DOM write operations.
- Creates a `RenderTask` interface to store read data.
- Implements a Read Phase to collect measurements and cull nodes.
- Implements a Write Phase to batch DOM updates using a DocumentFragment.
- Preserves video tracking logic to ensure animation loop continuity.
- Reduces browser reflows from O(n) to O(1) per frame.
- Replaced native select elements with a viewport-aware 'CustomDropdown' for better reliability and positioning.
- Added 'High Contrast Text' mode for improved legibility in inputs and values.
- Implemented parameter value deduplication in 'NodeDataExtractor' to reduce panel clutter.
- Expanded Google Font selection with 10+ new styles.
- Switched UI dimensions to relative units (em) for consistent scaling.
- Fixed layout 'bouncing' in sticky mode by removing hover transforms.
- Added a copy-to-clipboard button for 'Category' and 'Path' node details in the Inspector panel.
- Enhanced dropdown interaction stability by using 'mousedown' capture phase and broad event propagation prevention in 'InlineControlFactory'.
- Updated 'build' script to ensure CSS files are correctly synchronized from 'css/' to 'web/'.
- Standardized copy icon and styling, including a subtle checkmark feedback on success.
- Fixed an issue where the Inspector panel would 'bounce' due to hover transforms while in sticky mode.
- Improved dropdown closure logic to handle clicks both outside and within the panel content area.
- Optimized 'persist-active' mode to use viewport-based height limits and proper flex scrolling.
- Enhanced event propagation handling in 'InlineControlFactory' for better dropdown stability.
- Standardized panel font sizes and updated inline dropdowns to match the green theme.
- Added theme-specific CSS overrides for Light and GitHub themes in widget editors.
- Simplified copy-to-clipboard UI feedback.
- Added 'InlineControlFactory' to create inline toggle switches and combo boxes for supported widget types, replacing the click-to-edit modal for these types.
- Added 'DragValueController' to enable adjusting numeric values by dragging on the value display.
- Updated 'UIManager' to integrate these new controls, manage their lifecycle, and properly clean them up.
- Enhanced 'WidgetEditorFactory' to handle Enter key for confirming edits.
- Removed the copy button from string values to reduce clutter.
- Updated 'index.ts' to export the new components.
- Implemented a continuous animation loop in 'MagnifyGlass' that activates automatically when video widgets are detected, ensuring smooth playback for standard videos and VHS previews.
- Added robust validation to 'StateManager' for loading settings, including bounds checking for dimensions/opacity and format verification for colors and enums.
- Updated widget detection logic to correctly identify and handle 'videopreview' and 'audiopreview' widgets.
- Ensured animation loops are properly stopped when the glass is hidden or destroyed to preserve resources.
- Moves `litegraphCanvas.getBoundingClientRect()` call outside the widget loop in `renderHtmlOverlays`.
- Reuses the `dpr` calculated at the top level.
- Adds regression test `tests/unit/MagnifyGlassRenderOptim.test.ts`.
Improves rendering performance by reducing forced reflows during magnification.
Add validation for all InfoPanel settings loaded in StateManager to prevent
injection of invalid values (e.g. out-of-bounds numbers, invalid colors).
This mitigates risks of degraded stability or potential injection via
manipulated settings storage.
- Add validateNumber, validateColor, validateStringOption helpers
- Update StateManager.loadSettings to validate all keys
- Add unit tests for validation logic
- Export form creation helpers for testing
- Add unique ID generation for sliders, selects, and color pickers
- Associate labels with inputs using `htmlFor`
- Add unit tests to verify accessibility attributes
